Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 15, 2017 at 11:02 pm #839621
    Flo

    Hi,
    Wasn’t able to find the answer on background images in color sections, covering a specific percentage.
    It seems to work perfectly on desktop, but on mobile the responsive view it seems to go wrong using a samsung s7 1440×2560.

    Can it have something to do with the captions that go beyond the image height (aligned on the bottom)?
    Or is it that I have changed the section minimum height to 60%?

    What I’d like to do in the end is to show a background image full width responsive that will minimally cover about 60% of every screen as starting point so the text below is already ready to read, all other color sections have 75%. it should not create empty spaces below or above the images, that will cause captions to no longer be put over the images, as well as that directly a new text block or image will follow without white space.
    Details listed in private content box.

    Hope you can help?
    Cheers,
    Flo.

    • This topic was modified 7 years, 4 months ago by Flo.
    August 16, 2017 at 12:19 pm #839846
    Victoria

    Hey Flo,

    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: 475px) {
#av_section_1,
#av_section_2,
#av_section_3,
#av_section_4 {
   background-size: cover;
   height: 600px !important;
}
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 16, 2017 at 9:23 pm #840083
    Flo

    Hi Victoria,

    Thanks a lot, something changed, but it didn’t do the trick yet, please find screenshot included, both current (after change) and how I’d like it to show.

    Hope you can help again. I guess what needs to happen no is that the image needs to be resized based on the vertical screen size. It seems now to stop with resizing when the full width is reached, filling the width horizontally.

    Thanks a lot.
    Cheers,
    Floris.

    August 18, 2017 at 2:53 pm #840890
    Victoria

    Hi Floris,

    Try adding !important to

    
background-size: cover !important;

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

    August 20, 2017 at 9:50 am #841631
    Flo

    Hi Victoria,
    I tried many different things, however I still was not able to get it working.
    Then I started to play around with the suggestion and defining the code for the avia-section.
    .avia-section {
    background-size: cover !important;
    }

    That worked, and showed everything perfectly on windows and iOS and Android, however it does break the experience on ipad and iphones.

    Any idea on how I’m able to resolve this?

    Thanks and sorry it appears such a tedious issue…

    Cheers,
    Flo.

    • This reply was modified 7 years, 4 months ago by Flo.
    August 20, 2017 at 8:50 pm #841755
    Mike

    Hi,
    I see that on Android and windows mobile it is working correctly, as you stated.
    please see screenshot in Private Content area.
    Just to rule out caching, have you cleared your cache on your ipad and iphones?

    Best regards,
    Mike

    August 20, 2017 at 9:02 pm #841757
    Flo

    Hi Mike,
    Thanks for your very quick reply!
    The website has been loaded on fresh devices, so no previous caching issue is applicable unfortunately.
    Any other idea?
    Cheers
    Floris.

    August 21, 2017 at 10:51 am #841935
    Flo

    Hi Mike,
    I have included the following lines that seem to fix the issue…
    I’m not a html css wizkid, so unsure if there might be conflicts now in the setup.

    Quick CSS

    .avia-section {
   background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

    Custom.css

    Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 475px) {
av_section_1,
av_section_2,
av_section_3,
av_section_4 {
   background-size: cover !important;
   height: 600px !important;
}
}

    Can you validate if this is the right way to go? or I might have caused issues I’m not aware off?

    Cheers,
    Flo.

    • This reply was modified 7 years, 4 months ago by Flo.
    August 23, 2017 at 5:30 am #842859
    Ismael

    Hi,

    The selectors in the second css declaration are invalid. Please put a “#” symbol before the id name.

    #av_section_1,
#av_section_2,
#av_section_3,
#av_section_4

    Please note that those IDs are generic selectors created by theme so they’re are going to occur throughout the site. Use the “Section ID” field if you want to apply certain css modifications on a specific color section or element.

    Best regards,
    Ismael

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