CODEWITHSUNDEEP
cssless
Bogdan
Bogdan

Reputation: 713

CSS Grid 2 columns aren't in the correct position

I have the following example Jsfiddle where i've posted all 12 columns and the required css. the next piece of code i think it's the one that's causing the problems. In the live example you will notice that these two columns at less than 320px screen width will break the container and scrollbar will appear. I've tried fixing this problem but i didn't find a solution so far. Anyone around who can help me out ? 

<div class="col-mb-2 col-8 col-dt-5"><p>&nbsp;</p></div>
<div class="col-mb-2 col-2 col-dt-8"><p>&nbsp;</p></div>

Update: Added a picture to see the portion of the problem those two columns are move more than the rest

Upvotes: 1

Views: 110

Answers (2)

Mohsen Safari
Mohsen Safari

Reputation: 6795

I think the problem is with this class:

.testgrid p {
background: #5d68c2;
margin-bottom: 2em;
font-size: 0.75em;
line-height: 1em;
padding: 1em;    /*   <--- this is the problem   */
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
font-family: "Open Sans", Helvetica, Arial, Sans-serif
}

you need to remove left and right padding:

.testgrid p {
  background: #5d68c2;
  margin-bottom: 2em;
  font-size: 0.75em;
  line-height: 1em;
  padding: 1em 0px;   /*   updated   */
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 800;
  font-family: "Open Sans", Helvetica, Arial, Sans-serif;
}

I tried box-sizing but not worked.

view this: DEMO

Upvotes: 0

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

so you need to write media query

@media (max-width:312px) {

.col-dt-5, .col-dt-8{padding:0px 2px !important}


}

(max-width:312px) means, the width of the scree is 312px or less

Upvotes: 1

Related Questions