Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 22, 2017 at 12:16 am #811244
    derarbeitspsychologe.at

    Hi!
    I have a picture on the welcome page.
    Unfortunately, it looks distorted in the mobile version.
    May you have a CSS Code for this?
    Thanks a lot,
    Patrick

    June 22, 2017 at 2:38 am #811273
    Mike

    Hey derarbeitspsychologe.at,
    I believe you have some css in your General Styling > Quick CSS field or in another custom css area that looks like this:

    @media only screen and (max-width: 736px) {
.av-parallax-inner.main_color.avia-full-stretch {
background-position: -70px 100px !important;
background-size: 120% 100% !important;
}}

    Please change to this:

    @media only screen and (max-width: 736px) {
.av-parallax-inner.main_color.avia-full-stretch {
background-position: -550px 100px !important;
}}

    Please clear your cache: [http://www.refreshyourcache.com/en/home/]

    Best regards,
    Mike

    June 23, 2017 at 4:50 pm #812163
    derarbeitspsychologe.at

    Hi Mike!
    Thanks a lot for your answer. I appreciate your helpful answers very much. :)

    On the screen of iPhone 6s it fits perfect as long as I keep it vertical.
    Horizontally, I see the picture on the left and there is a white background on the right side.

    On the screen of iPhone 5 it doesn’t look nice at all.

    May there is another solution, in which the picture on all mobile devices extends over the entire screen and looks beautiful?
    Best regards,
    Patrick

    June 25, 2017 at 2:01 pm #812673
    Mike

    Hi,
    We will have to write code for each device:

    /*iPhone 6 Plus in landscape*/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { .av-parallax-inner.main_color.avia-full-stretch {
background-position: -0px 100px !important;
background-size: 200% 105% !important;
}}
    /*iPhone 5 & 5S in portrait*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { .av-parallax-inner.main_color.avia-full-stretch {
background-position: -650px 100px !important;
}}

    Over lapping sizes may cause issues, so your first code from last week might need to change to this:

    
@media only screen and (min-device-width : 569px) 
and(max-width: 736px) {
.av-parallax-inner.main_color.avia-full-stretch {
background-position: -550px 100px !important;
}}

    Best regards,
    Mike

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