Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 19, 2017 at 4:06 pm #853899
    lemosop

    I want my images in my horizontal gallery to appear in their original aspect ratio on desktop and mobile. Right now it looks great on desktop, but images are cropped in mobile. How do I make the gallery appear the same in mobile as desktop? I don’t want my images cropped.

    http://sophialemon.com/photography-studio

    September 19, 2017 at 5:29 pm #853954
    Yigit

    Hey Sophia,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 480px) {
.responsive .av-horizontal-gallery-img {
    width: auto;
    height: 100%;
    transform: none;
}}

    Best regards,
    Yigit

    September 19, 2017 at 5:45 pm #853966
    lemosop

    There has definitely been some progress! There just seems to be a problem with the vertical alignment. Suggestions? :)

    sample problem

    September 20, 2017 at 10:04 am #854276
    Victoria

    Hi lemosop,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .avia-section-huge .content {
    padding-top: 50px;
    padding-bottom: 10px;
}
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 20, 2017 at 3:58 pm #854411
    lemosop

    Hey Victoria,

    I tried that and removed it as it did not solve the problem. My horizontal gallery images are still appearing low in the box on mobile. If you have a solution to this please let me know.

    September 20, 2017 at 5:16 pm #854477
    Victoria

    Hi,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
.responsive .av-horizontal-gallery-img {
  top: 0;
}
  .avia-section-huge .content {
    padding-top: 50px;
    padding-bottom: 30px;
}
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    September 20, 2017 at 5:21 pm #854482
    lemosop

    OK! That definitely solved that problem, Victoria! Thank you. The only remaining issue is that when I turn my phone horizontally all images are still cropped. hahaha

    I’m sure I just need to add another max-width? Let me know…

    September 20, 2017 at 5:48 pm #854502
    Victoria

    Hi lemosop,

    So change the media query
    @media only screen and (max-width: 479px) { to @media only screen and (max-width: 767px) {

    Let me know how this works for you.
    Best regards,
    Victoria

    September 20, 2017 at 5:57 pm #854513
    lemosop

    AMAZING! PERFECT! BRILLIANT! Thank you so much, Victoria. :)

    September 21, 2017 at 11:55 am #854759
    Rikard

    Hi,

    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.