Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #804785

    Hi,

    I have a consistent problem with Enfold’s mobile site.
    The landscape images within color sections are resized and cropped automatically.
    I don’t want this to happen.

    I tried the following for example:

    I apply the Section ID home-slider-image to the color section.

    Then I added this CSS and experimented with the numbers.

    @media only screen and (max-width: 767px) {
    #home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
        position: relative;
        top: -200px;
        background-size: contain !important;
    }} /*home slider image + uncrop width*/
    
    @media only screen and (max-width: 480px) {
    #home-slider-image {
        background-position: 50% 0%!important;
        background-attachment: scroll!important;
    }}

    The above I am sure is incorrect.
    It leaves a huge white space under the photo AND it does not keep the top of the image flush against the mobile header on all devices (e.g. iPhone 6 vs iPhone 7 Plus).
    See screenshot.

    What is the simplest formula for keeping the photos the same dimensions / full frame on the mobile site?

    Is there one standard CSS which tells the mobile site “Don’t change any of my photos ever”?

    I would like to know the CSS to change these images individually on the mobile site.
    and
    I’d like to know the CSS to change all of the images, mobile site wide if possible.

    Thank you,

    Jas

    • This topic was modified 6 years, 9 months ago by Basilis.
    #805483

    Hi guys!

    I know you are crazy busy, but I am hoping to launch this site before the weekend. I’m sure it is an easy fix. It’s urgent.

    Help!

    Thanks,

    Jas

    #806067

    Hi Jas,

    Color Section height changes depending on the screen size and background image’s proportions are not always the same with color section. I think for now the best solution would be replacing background image on mobile to a one with more spaces on both top and bottom using following code

    @media only screen and (max-width: 767px) {
    #home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
        background-image: url(URL_TO_YOUR_IMAGE_HERE);
    }}

    Best regards,
    Yigit

    #806240

    Hi Yigit,

    I need one thing, to make the all the landscape images on my site to be full frame with no giant white space below the image. (See screenshot in Private Content below) I do not to replace the images. It takes forever to find excellent images. There has to be way as this has been successful on other sites.

    This is not just about one image. I need others adjusted. Please look at the other images listed below (in Private Content) to see what I am talking about. This is more than a width problem. People’s heads are cut off, all the people don’t fit in the photo, etc.

    Perhaps we also need to use CSS to resize the height of the Color Section or use a different element. This is a problem on almost all of my sites. I would like to find a permanent solution for this so I don’t have to bother you guys with this problem on every site.

    Thank you so much for your help Yigit.

    As I mentioned this CSS below, worked to some degree, but still with problems. I put the CSS back on the site so you can see the problem when you go to the site on your mobile device. The CSS below worked for another site with the similar image dimensions. (See Private Content below for the other site.)

    @media only screen and (max-width: 767px) {
    #home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
        position: relative;
        top: -200px;
        background-size: contain !important;
    }} /*home slider image + uncrop width*/
    
    @media only screen and (max-width: 480px) {
    #home-slider-image {
        background-position: 50% 0%!important;
        background-attachment: scroll!important;
    }}
    • This reply was modified 6 years, 9 months ago by Jasmer.
    #806940

    Hi!

    Which is the page with giant whitespace? It is not clear from the screenshot. I do not see that whitespace, I checked on my cellphone. It loos fine. Could you clear the cache or check on another device, and see it the whitespace is still there.
    What do you mean by full fame photo? Show full image?

    Cheers!
    Victoria

    • This reply was modified 6 years, 9 months ago by Victoria.
    #807191

    Victoria,

    I just added the CSS back so you can see. I commented it out because it didn’t work. The large white space is on the home page now just below the top image.

    @media only screen and (max-width: 767px) {
    #home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
        position: relative;
        top: -200px;
        background-size: contain !important;
    }} /*home slider image + uncrop width*/
    
    @media only screen and (max-width: 480px) {
    #home-slider-image {
        background-position: 50% 0%!important;
        background-attachment: scroll!important;
    }}

    The other images I need CSS to apply to are below.

    Thanks,

    Jas

    #808486

    Hi Jas,

    In most cases parallax sections do not work on mobile and are very hard to be adjusted. I would recommend, hiding them and building a section to show on mobile without parallax, just image, text and button if you need. This can be done with a color section, or some slider.

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

    #808487

    Hi Jas,

    In most cases parallax sections do not work on mobile and are very hard to be adjusted. I would recommend, hiding them and building a section to show on mobile without parallax, just image, text and button if you need. This can be done with a color section, or some slider.

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

    #808495

    Victoria,

    I need to center the images at the very least. But here is the deal, I have done this before on a couple of posts. I just can’t seem to get this one. There is a way to do it. Would you draw Kriesi, Yigit, Ismael or Josue’s attention to see if they might have some ideas please? I would REALLY appreciate it.

    I have got to get this site up asap. I would appreciate if you could consult with your colleagues on this. Thank you.

    https://kriesi.at/support/topic/center-slider-image-on-mobile-site/

    #808496
    #809732

    This post has gotten too confusing and no one is answering it so close topic. Thanks

    #809924

    Hi,

    I will do, we are sorry you feel like that.

    Best regards,
    Basilis

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Mobile Site Images Full Frame’ is closed to new replies.