Columns on Mobile devices

• 

  arbsdesign · Member · Nov 10, 2016 at 11:35 am

  • Copy link
  • Add topic to favorites

  Hi

  I have 3 columns on one of my pages which works perfectly, just as i want it to. HOWEVER, on mobile, the columns are so thin that the text shows only a few words per line and its just not user friendly. I wondered if there is a way of using CSS so that on mobile devices this page is in just one column. BUT.. i use columns on other pages and further down this page to aid my mobile experience so that pictures of 4 go into 2X2 etc. So i only want the CSS to affect this specific part of the page… is this possible? (i know that CSS is usually site wide)

  the page i want help with is…

  http://www.arbsdesign.com/logodesign

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

• 

  thesacredpath · Member · Nov 12, 2016 at 10:52 am

  • Copy link

  Hi there, I see you have added inline styling to the three divs with the images and text. What we would have to do is to remove that styling and then add a unique CSS class and then add the styling to your custom CSS.

  So, the opening div would look like this.
  <div class="my-col">
  And then we would have the following CSS, which may need tweaking once we get into it.

  .my-col {
  float: left;
  width: 33%;
  }
  @media screen and (max-width: 600px) {
  .my-col {
  width: 100%;
  }
  }