Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 14, 2020 at 5:39 pm #1267222
    Actionrev

    I changed by background Image to Parallax and when it’s viewed on a smartphone the image is stretched vertically. It looks fine in desktop mode. It’s a 1500×700 image in the Color Section on the Home page. The settings in the ColorSection/BackgroundImage/ are Parallax, Center Center, No Repeat. What am I doing wrong?

    December 17, 2020 at 7:36 am #1268025
    Ismael

    Hey Actionrev,

    Thank you for the inquiry.

    It looks distorted on certain screen sizes because of this css code.

    .avia-section, .avia-section .av-parallax-inner {
	background-size: 100% 100% !important;
}

    You may need to wrap it inside a css media query so that it only affects screens with the same aspect ratio as the background image.

    // https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    Best regards,
    Ismael

    December 17, 2020 at 3:10 pm #1268140
    Actionrev

    Because I took over this I’m not sure why that CSS was added. I removed it but no change.

    December 18, 2020 at 1:35 pm #1268402
    Actionrev

    I don’t know what I did but the image is displaying correctly on mobile devices. I made some changes to other areas of the website and had to reverse to previous Revision. I went back to remove
    .avia-section, .avia-section .av-parallax-inner {
    background-size: 100% 100% !important; }
    and saved.

    Did I miss a step before? WP said “Alright! All Options saved, no problems whatsoever.” I checked in the Quick CSS to see of what I removed was there and it wasn’t. Should I clear the cache?

    December 18, 2020 at 3:42 pm #1268441
    Ismael

    Hi,

    Thank you for the update

    Yes, you should clear the cache or try to check the site on incognito mode. Also, make sure that the Performance > File Compression settings are disabled while you are still configuring the site.

    Best regards,
    Ismael

    December 18, 2020 at 7:05 pm #1268477
    Actionrev

    Thank you for the advice.

    One issue that popped up when I removed the above CSS is the Background Image is now zoomed in on. There was empty space around the subject in the photo but now the left and the right are getting cut off slightly. The Maximum Container width is 1600px and the image is 1500px 550px. I tried 1400px 446px and 1700px 550px and didn’t notice a difference. Any thoughts as to why this is happening?

    FYI, I have not upgraded to WordPress 5.6. Still on 5.5.3

    December 21, 2020 at 5:48 am #1268944
    Ismael

    Hi,

    The image is zoomed in because the theme has to maintain its aspect ratio, so parts of it will have to overflow outside the background positioning area or it will get cut off. We could set it so that the whole image is visible but it will create white spaces or gaps around the container. If you would like to test it, please try this css code.

    @media only screen and (max-width: 767px) {
    .avia-full-stretch {
	background-size: contain !important;
	background-position: top center !important;
    }
}

    Best regards,
    Ismael

    January 3, 2021 at 1:36 pm #1270044
    Actionrev

    I thought that changing the canvas size or resolution would change the perspective. Am I wrong?

    January 4, 2021 at 5:40 am #1270102
    Ismael

    Hi,

    What do you mean by perspective? Maybe it would be much more simple if you could show us how you would like the slider to display on mobile view. Please use imgur or dropbox for the screenshot or mockup.

    Best regards,
    Ismael

    January 4, 2021 at 1:59 pm #1270150
    Actionrev

    What I mean by “perspective” is how the background is being viewed. I would like it to be zoomed out so that the sides of the screen have only white and blue gradient without the parts being cut off at the borders. Right now It looks ok but its kind of cluttered. Check the link below for an example.

    After reviewing our chat exchange, I think you might have already answered my question but it’s a little over my head. This is what you said.

    “You may need to wrap it inside a css media query so that it only affects screens with the same aspect ratio as the background image. // https://www.w3schools.com/css/css3_mediaqueries_ex.asp”

    After looking at the link you sent I’m still confused because I’m still learning CSS. Is there another link you could send that would explain more? Maybe a tutorial? I would love to learn.

    January 6, 2021 at 2:40 pm #1270627
    Ismael

    Hi,

    You could set it so that the whole image is visible in the section area, but then again may create spaces around the container or around the background image.

    .avia-full-stretch {
	background-size: contain !important;
}

    IMO, the section looks good already even if the image is partly cut off or is not fully visible.

    Best regards,
    Ismael

    January 6, 2021 at 4:35 pm #1270653
    Actionrev

    I agree, it does look good but I wanted more flexibility. There has to be a way to manipulate the perspective. I’ll keep trying and searching.

    January 11, 2021 at 4:56 am #1271468
    Ismael

    Hi,

    Let us know when you have found a solution. Again, you could use the css code above to adjust the size of the background image. Please also note that it is possible to set the width and height of the background image in percentage based on the size of the parent element.

    // https://www.w3schools.com/cssref/css3_pr_background-size.asp

    Best regards,
    Ismael

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