Portfolio column display on mobile screens

  • Resolved hlmcneill

    (@hlmcneill)


    8 years, 1 month ago

    On my website front page I use portfolio to display three projects in a row, i.e. 3 columns. On a mobile screen this creates a row with two projects and then a row with only one project so it doesn’t look good. I’m using Edge theme.
    I’d like to have just one project per row on the smaller screen. I’ve tried changing the percentage width in CSS (portfolio-entry-mobile-first-item-row and portfolio-entry-mobile-last-item-row) but this affects the full size layout too. Any ideas of how to fix this?

Viewing 1 replies (of 1 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    I’ve tried changing the percentage width in CSS (portfolio-entry-mobile-first-item-row and portfolio-entry-mobile-last-item-row)

    This is indeed the way to go, but you will need to use CSS Media Queries to make sure your changes are only applied to a specific screen size:
    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    This should help you create custom CSS that will apply to mobile screens only, without changing the layout on desktop.

    I hope this helps.

Viewing 1 replies (of 1 total)
  • The topic ‘Portfolio column display on mobile screens’ is closed to new replies.