Styjun

Was there a shared-world project before "Thieves World"?

Elements other than carbon that can form many different compounds by bonding to themselves?

Could the terminal length of components like resistors be reduced?

On The Origin of Dissonant Chords

Does tea made with boiling water cool faster than tea made with boiled (but still hot) water?

How to have a sharp product image?

"The cow" OR "a cow" OR "cows" in this context

What are the characteristics of a typeless programming language?

Aligning equation numbers vertically

Re-entry to Germany after vacation using blue card

Why was the Spitfire's elliptical wing almost uncopied by other aircraft of World War 2?

Is there a way to generate a list of distinct numbers such that no two subsets ever have an equal sum?

Why does Mind Blank stop the Feeblemind spell?

How did Captain America manage to do this?

What happened to Captain America in Endgame?

Is it idiomatic to construct against `this`

Does a large simulator bay have standard public address announcements?

Can I criticise the more senior developers around me for not writing clean code?

As an international instructor, should I openly talk about my accent?

A ​Note ​on ​N!

Mistake in years of experience in resume?

How do I deal with a coworker that keeps asking to make small superficial changes to a report, and it is seriously triggering my anxiety?

bldc motor, esc and battery draw, nominal vs peak

Rivers without rain

React Component with CSS grid doesnt layout properly

How to recompile ExtJs 5 theme with custom scss addedWindows 8.1 xaml stretch doesnt shrink buttonreact-router - pass props to handler componentCan you force a React component to rerender without calling setState?How to conditionally add attributes to React components?Detect click outside React componentOverlay component on Grid layout in React.jsAlign items in a gridUsing CSS Grid in multi-component React layoutMy CSS grid layout causes horizontal scroll and I can't figure out why

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I am trying to make two columns side by side for each row in large screen, i have information boxes but they are not filling up the row as i want.following rows are same and only have 1 picture like this

this is my scss code

@import "./Navbar.scss";
.tourlistwidth:70vw; margin:0 auto;padding:2rem 0; 
.alltogetherbackground:$mygray ;border-radius:0.7rem;margin:1rem 0;
imgwidth:100%; border-top-left-radius:0.7rem;
 border-top-right-radius:0.7rem ; display:block 

.img-containersposition:relative; &:hover.fa-window-closeopacity:1 
.fa-window-closeposition:absolute;cursor:pointer;transition:all 0.3s linear;opacity:0;display:block;
right:0.4%;
.tourinfospadding:1rem 0.5rem; h3text-transform:uppercase;color:$mygreen;margin-top:1rem;h4color:$myblack 
pmargin-top:0.7rem ;font-size:19px ; 

@media screen and (min-width:768px) .tourlist 
display:grid;
grid-template-columns:1fr 1fr;
grid-column-gap:1.3rem;

 

this imports information and mapping components and works correct

import React, Component from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import CityTour from "./CityTour.js"
import "./components/tourlist.scss"
class App extends Component 
 render() 
 return (<div >
 <Navbar />
 <div class="tourlist ">

 <CityTour />
 </div>
 </div>
 );
 


export default App;

reactjs sass grid

share|improve this question

asked Mar 22 at 17:16

TolimaTolima

34

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  SOLVED I APPLIED GRID ON WRONG
  
  – Tolima
  Mar 22 at 18:52
  

  
  
  
  

add a comment | 

0

I am trying to make two columns side by side for each row in large screen, i have information boxes but they are not filling up the row as i want.following rows are same and only have 1 picture like this

this is my scss code

@import "./Navbar.scss";
.tourlistwidth:70vw; margin:0 auto;padding:2rem 0; 
.alltogetherbackground:$mygray ;border-radius:0.7rem;margin:1rem 0;
imgwidth:100%; border-top-left-radius:0.7rem;
 border-top-right-radius:0.7rem ; display:block 

.img-containersposition:relative; &:hover.fa-window-closeopacity:1 
.fa-window-closeposition:absolute;cursor:pointer;transition:all 0.3s linear;opacity:0;display:block;
right:0.4%;
.tourinfospadding:1rem 0.5rem; h3text-transform:uppercase;color:$mygreen;margin-top:1rem;h4color:$myblack 
pmargin-top:0.7rem ;font-size:19px ; 

@media screen and (min-width:768px) .tourlist 
display:grid;
grid-template-columns:1fr 1fr;
grid-column-gap:1.3rem;

 

this imports information and mapping components and works correct

import React, Component from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import CityTour from "./CityTour.js"
import "./components/tourlist.scss"
class App extends Component 
 render() 
 return (<div >
 <Navbar />
 <div class="tourlist ">

 <CityTour />
 </div>
 </div>
 );
 


export default App;

reactjs sass grid

share|improve this question

asked Mar 22 at 17:16

TolimaTolima

34

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  SOLVED I APPLIED GRID ON WRONG
  
  – Tolima
  Mar 22 at 18:52
  

  
  
  
  

add a comment | 

I am trying to make two columns side by side for each row in large screen, i have information boxes but they are not filling up the row as i want.following rows are same and only have 1 picture like this

this is my scss code

@import "./Navbar.scss";
.tourlistwidth:70vw; margin:0 auto;padding:2rem 0; 
.alltogetherbackground:$mygray ;border-radius:0.7rem;margin:1rem 0;
imgwidth:100%; border-top-left-radius:0.7rem;
 border-top-right-radius:0.7rem ; display:block 

.img-containersposition:relative; &:hover.fa-window-closeopacity:1 
.fa-window-closeposition:absolute;cursor:pointer;transition:all 0.3s linear;opacity:0;display:block;
right:0.4%;
.tourinfospadding:1rem 0.5rem; h3text-transform:uppercase;color:$mygreen;margin-top:1rem;h4color:$myblack 
pmargin-top:0.7rem ;font-size:19px ; 

@media screen and (min-width:768px) .tourlist 
display:grid;
grid-template-columns:1fr 1fr;
grid-column-gap:1.3rem;

 

this imports information and mapping components and works correct

import React, Component from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import CityTour from "./CityTour.js"
import "./components/tourlist.scss"
class App extends Component 
 render() 
 return (<div >
 <Navbar />
 <div class="tourlist ">

 <CityTour />
 </div>
 </div>
 );
 


export default App;

reactjs sass grid

share|improve this question

asked Mar 22 at 17:16

TolimaTolima

34

@import "./Navbar.scss";
.tourlistwidth:70vw; margin:0 auto;padding:2rem 0; 
.alltogetherbackground:$mygray ;border-radius:0.7rem;margin:1rem 0;
imgwidth:100%; border-top-left-radius:0.7rem;
 border-top-right-radius:0.7rem ; display:block 

.img-containersposition:relative; &:hover.fa-window-closeopacity:1 
.fa-window-closeposition:absolute;cursor:pointer;transition:all 0.3s linear;opacity:0;display:block;
right:0.4%;
.tourinfospadding:1rem 0.5rem; h3text-transform:uppercase;color:$mygreen;margin-top:1rem;h4color:$myblack 
pmargin-top:0.7rem ;font-size:19px ; 

@media screen and (min-width:768px) .tourlist 
display:grid;
grid-template-columns:1fr 1fr;
grid-column-gap:1.3rem;

 

import React, Component from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import CityTour from "./CityTour.js"
import "./components/tourlist.scss"
class App extends Component 
 render() 
 return (<div >
 <Navbar />
 <div class="tourlist ">

 <CityTour />
 </div>
 </div>
 );
 


export default App;

share|improve this question

asked Mar 22 at 17:16

TolimaTolima

34

share|improve this question

asked Mar 22 at 17:16

TolimaTolima

34

asked Mar 22 at 17:16

TolimaTolima

34

asked Mar 22 at 17:16

TolimaTolima

34