Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • April 29, 2016 at 11:17 am #624253
    Jasmer

    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

    April 29, 2016 at 2:22 pm #624477
    Yigit

    Hi Jasmer!

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

    Best regards,
    Yigit

    May 1, 2016 at 2:22 am #625211
    Jasmer

    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, 6 months ago by Jasmer.
    May 3, 2016 at 5:00 am #626157
    Rikard

    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, 6 months ago by Rikard.
    May 4, 2016 at 9:59 am #627015
    Jasmer

    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

    May 7, 2016 at 3:45 am #628523
    Ismael

    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

    June 4, 2017 at 4:48 am #803489
    Jasmer

    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

    June 4, 2017 at 3:51 pm #803619
    Victoria

    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

    June 5, 2017 at 12:02 pm #803838
    Jasmer

    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*/
    June 5, 2017 at 12:27 pm #803853
    Yigit

    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

    June 5, 2017 at 12:46 pm #803858
    Jasmer

    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

    June 5, 2017 at 12:48 pm #803859
    Yigit

    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

    June 5, 2017 at 1:05 pm #803866
    Jasmer

    Thank you!

    • This reply was modified 7 years, 5 months ago by Jasmer. Reason: Solved
    June 7, 2017 at 11:13 am #805018
    Victoria

    Hi Jasmer,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 7, 2017 at 8:58 pm #805290
    Jasmer

    Please close this topic. Thank you!

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