Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #624253

    Hi guys!

    The slider image on the mobile site is not centered vertically.

    1. Do you have sone ideas on how to move the image down, inside the frame, on the mobile site ONLY.

    2. The image is fine on the main site. Do you know why it is so off on the mobile site?

    3. I’d like to increase the size of the frame to allow a little bit more vertical height to the photo.

    Thank you,

    Jasmer

    #624477

    Hi Jasmer!

    This is how it looks on my end (screenshot in private content field). Have you figured it out already?

    Best regards,
    Yigit

    #625211

    Hi Yigit,

    No, I have viewed it on an iPhone 6s Plus, iPhone 6, iPhone 5s and an Android HTC One. The problem is on all of these devices.

    What phone are you viewing it on? Perhaps the cache on your phone needs to be cleared from last the last topic you helped me with?

    Thanks,

    Jas

    • This reply was modified 8 years, 7 months ago by Jasmer.
    #626157

    Hi Jasmer,

    Please try the following instead:

    @media only screen and (max-width: 767px) {
    .page-id-1212 #after_section_1 .content {
    padding-top: 0 !important;
    }
    }

    Regards,
    Rikard

    • This reply was modified 8 years, 7 months ago by Rikard.
    #627015

    I Rikard,

    I tried this on an iPhone 6s plus and an iPhone 6, and it does not work. The CSS is in place and is not shifting the image. Any ideas? Feel free to take a look around.

    Thank you,

    Jas

    #628523

    Hi,

    This is the correct css media query for iPhone 6: http://stackoverflow.com/questions/25759046/iphone-6-and-6-plus-media-queries

    Best regards,
    Ismael

    #803489

    Hi guys,

    I have an iPhone 7 Plus now and the problem is the same. I need fixed it.

    I looked at the above site links and it seems correct.

    I have this CSS added and it still doesn’t work:

    @media only screen and (max-width: 767px) {
    .page-id-1212 #after_section_1 .content {
    padding-top: 0 !important;
    }
    } /*team photo position*/

    I just need to drop that photo down. There has to be a simple CSS that works.

    I need CSS that works for all devices, just like all other CSS I have implimented.

    Help!

    Jas

    #803619

    Hi Jasmer,

    Here is the code you can put in your child theme style.css

    
    @media only screen and (max-width: 450px) {
      #team-color-section .av-parallax-inner.main_color.avia-full-stretch {
        background-position: top left;
    }
    
    }
    

    Add !important; if it will not work without it and clear the cache after applying changes.
    If you need further assistance please let us know.

    Best regards,
    Victoria

    #803838

    Hi Victoria,

    This is a tough one. I removed the existing CSS I added and listed above. Then added what you suggested and added !important. Doesn’t change anything. Is this correct?

    I cleared my cache from the web host. Let me know what it looks like on your mobile device.

    I added this to Quick CSS. Is there a reason I need to add it to the child theme style.css? I see you mentioned that.

    @media only screen and (max-width: 450px) {
      #team-color-section .av-parallax-inner.main_color.avia-full-stretch {
        background-position: top left !important;
    }
    } /*team photo position*/
    #803853

    Hi,

    Can you please try using following code

    @media only screen and (max-width: 767px) {
    #team-color-section .av-parallax-inner.main_color.avia-full-stretch {
        position: relative;
        top: 60px;
    }}

    Best regards,
    Yigit

    #803858

    Yigit,

    Excellent! Thank you. I had to add the below to drop it down enough.

    top: 165px;

    There is still a slight problem. The photo on the desktop site is perfect. The photo on the mobile site crops the right and left side of the photo and I cannot see the team members on either side.

    Why does that happen?

    Thanks,

    Jas

    #803859

    Hi!

    Can you please try adding following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
    #team-color-section .av-parallax-inner.main_color.avia-full-stretch { 
    background-size: contain !important; }}

    Regards,
    Yigit

    #803866

    Thank you!

    • This reply was modified 7 years, 6 months ago by Jasmer. Reason: Solved
    #805018

    Hi Jasmer,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #805290

    Please close this topic. Thank you!

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Center slider image on mobile site’ is closed to new replies.