Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 13, 2018 at 4:52 pm #972361
    ColinWalton

    I have been using Portfolio Grid to summarise my portfolio items:

    https://waltoncreative.com/portfolio-item/travel-photographs/

    When I look at this page on smaller screens using Safari’s Responsive Design Mode, the FIRST image is always full width.

    I can’t find anything in the CSS that is causing this. Any idea how I can make the first image match the width of the others?

    Colin

    • This topic was modified 7 years, 5 months ago by ColinWalton.
    June 14, 2018 at 3:49 pm #972844
    Victoria

    Hey ColinWalton,

    Could you please attach some screenshots of the issue?

    I see that on individual portfolio there is a gallery on the tablet screen and fullscreen slider for mobile.

    Can you please explain a bit more which screen sizes are not working for you?

    Best regards,
    Victoria

    June 14, 2018 at 4:33 pm #972889
    ColinWalton

    Hi, the problem seems to be on mid-sized browsers. See screen shot.

    This is using the portfolio grid. See settings screen shots too.

    Thanks for your help!

    June 15, 2018 at 3:24 pm #973358
    Victoria

    Hi ColinWalton,

    Thank you for the screenshots.

    600px is included in the mobile screen media query

    
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

}

    And so it should be 100%, or do you want it to be 50%?

    Best regards,
    Victoria

    June 15, 2018 at 3:27 pm #973360
    ColinWalton

    Ok thanks for looking at them.

    The problem is that the FIRST one is wrongly always 100%, then the rest seem to be whatever has been set.

    I need to make ALL the items in the portfolio grid to be the same size.

    I hope that this helps explain what I am looking for.

    June 16, 2018 at 7:57 pm #973722
    Victoria

    Hi ColinWalton,

    These rules make that happen for 480 to 767 screen sizes
    Image 2018-06-16 at 20.55.40.png

    Please try the code below:

    
@media only screen and (max-width: 767px) and (min-width: 480px) {
  .responsive #top #wrap_all .grid-sort-container.grid-total-odd .grid-entry.grid-loop-1 {
      width: 50%;
  }
}

    Best regards,
    Victoria

    June 18, 2018 at 11:38 am #974182
    ColinWalton

    That’s fixed it – thank you!

    June 18, 2018 at 10:38 pm #974506
    Basilis

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘First PORTFOLIO GRID image is always 100% width on small screens’ is closed to new replies.