Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 15, 2016 at 6:04 pm #661456
    akastimex

    Hi Kriesi team

    I’m using a color section background image, but its not responsive. (section layout –> at least 25%of browser window high) It doesn’t scale on a iphone or tablet. Desktop version works fine, even if I make the browser smaller.

    Is there a way to fixed this?

    thank you

    Alex

    July 17, 2016 at 1:04 pm #661737
    Rikard

    Hi akastimex,

    Do you mean the first color section on the page? If so it seems to be scaling fine on my end using iphone6/chrome. If that is not what you are referring to then please post screenshots of the issue and we’ll have a closer look.

    Thanks,
    Rikard

    July 19, 2016 at 11:01 am #662399
    akastimex

    On the internetsite there is a topic “Unsere Lovestory” The picture above and under is showing only the half of us. Do you know what I mean?

    July 21, 2016 at 2:41 pm #663409
    akastimex

    ???

    July 22, 2016 at 4:27 am #663663
    Ismael

    Hi,

    Please refrain from bumping or replying to your own thread because it gets pushed back to the end of the queue and moderators won’t be able to provide a response immediately. Please be patient while we go through the rest of the queue. Thank you for your understanding.

    The background size property of the image is set to “cover” which means that it will cover the whole container but parts of the image will overflow outside of it in order to keep the images’ aspect ratio. We can set the background size to 100% but it will distort the image. The only thing that you can do is to adjust the background position so that the faces are visible inside the color section:

    @media only screen and (max-width: 767px) {
.avia-full-stretch {
    background-size: cover !important;
    background-position: 45% 50% !important;
}
}

    Best regards,
    Ismael

    July 22, 2016 at 10:59 am #663768
    akastimex

    I am sorry and I understand, but I was wondering that nobody was answering.

    Thank you for an answer.

    But in this example enfold theme, it is working on my iphone

    Home v7: One Page Portfolio

    • This reply was modified 8 years, 2 months ago by akastimex.
    July 26, 2016 at 11:14 am #665238
    Andy

    Hi,

    your background image is responsive, as you can adjust it as you need for different screen sizes. Just use this code:

    @media only screen and (max-width: 767px) {
#av_section_2 {
background-size: 114% 75% !important;
background-position: 0px 72px !important;
}}

    and adjust as needed.

    Best regards,
    Andy

    July 31, 2016 at 11:51 pm #667075
    akastimex

    and where I have to put the script in? as CSS? Quick CSS?

    What does av section 2 means?

    • This reply was modified 8 years, 2 months ago by akastimex.
    August 5, 2016 at 3:22 am #668786
    Ismael

    Hi,

    Put the code in the QuicK CSS field and adjust as necessary.

    @media only screen and (max-width: 767px) {
.avia-full-stretch {
    background-size: cover !important;
    background-position: 45% 50% !important;
}
}

    Home v7: One Page Portfolio

    In the demo, you can see that the background images are partially cut off on mobile view. They behave the same in your installation.

    Best regards,
    Ismael

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