CSS Help for Mobile

• 

  healthiswellthco · Member · Jul 26, 2018 at 3:58 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’m having trouble with my CSS. I’m trying to change how my theme stacks the posts on mobile. Instead of a larger post with one on top of another, I would like the posts to stack 2×2 (or side by side). I used the below CSS to do this, it works everywhere except for the second row. Can anyone help with thi`s??

  @media only screen and (min-width: 360px) and (max-width: 980px)
  {
  .rp-medium-one, .rp-medium-two, .front-sidebar .rp-medium-one, .default-sidebar .rp-medium-one {
    width: 48%;
  	float: left;
  	margin-left: 2% !important;
  	border-bottom: none;
  }
  }

  The blog I need help with is: (visible only to logged in users)

• 

  dkmyta · Member · Jul 26, 2018 at 6:54 pm

  • Copy link

  Hey there!

  In order to align each of the image and associated content you must define a height for each post.

  At the moment no height is defined so when you float each section left because the initial post is a little longer bit longer then 3rd container “Cosmetic Buzzwords Explained”, the 3rd container seems to be getting hung up on the extra length of the padding and margin of “Could Your Sunscreen..” and therefor is displaced a whole container width over to the right.

  By defining an appropriate height for each container this will remove this hang up and each item will float properly into position.

  For example, when I attempt to set the height of the containers to 250px, all content fits with in and each container floats appropriately to the left.

  Try it out for yourself and keep in mind you can adjust the height to your desire.

  @media only screen and (min-width: 360px) and (max-width: 980px)
  {
  .rp-medium-one, .rp-medium-two, .front-sidebar .rp-medium-one, .default-sidebar .rp-medium-one {
     width: 48%;
     height: 250px;
     float: left;
     margin-left: 2% !important;
     border-bottom: none;
  }
  }

  Hoping this helps!

  Cheers

• 

  healthiswellthco · Member · Jul 27, 2018 at 6:02 pm

  • Copy link

  Thank you!!

• 

  healthiswellthco · Member · Jul 30, 2018 at 12:52 pm

  • Copy link

  Would I need to change the height to make it responsive on tablet screens?

• 

  darusja · Staff · Jul 31, 2018 at 5:55 pm

  • Copy link

  Hey,

  you need to make sure, that the width of the article is no more than 48%, now in the tablet display there is 50%, while the margin-right is 2%, so we have (from the left): 2% – 50% – 2% – 50%, when max is of course 100%.

  Cheers :)