Duet Theme: Make portfolio one column on mobile screens

• 

  carmensan · Member · Jul 9, 2015 at 1:36 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I have just put a three column portfolio on my homepage using the shortcode [portfolio display_content=”false” columns=”3″]

  This is fine for mobile and iPad views but, I would like to make the portfolio appear as a single column on phone screens.

  I know this will require an @media query but I am not sure where to of from there. A little help would be great!

  Cheers.

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

• 

  thesacredpath · Member · Jul 9, 2015 at 5:30 pm

  • Copy link

  Hi there, yes we can do that. Give the following a try, which takes the images to 100% width and displays them vertically at 600px and below.
  
  @media screen and (max-width: 600px) {
  .portfolio-entry {
  display: block !important;
  width: 100% !important;
  }
  }`

• 

  carmensan · Member · Jul 9, 2015 at 6:55 pm

  • Copy link

  Amazing. Thank you.

• 

  thesacredpath · Member · Jul 9, 2015 at 7:28 pm

  • Copy link

  You are welcome.