-
Posts
-
I recently updated from 3.0.4 to the latest version and started using a child theme. I noticed a few quirks that I was able to remedy via CSS, however just this morning I noticed that the Color Section elements were starting to get blown up to their maximum size. I’m using parallax display and this hasn’t changed since I updated the theme.
I need them to be resized to the size of the page responsively, currently I’m using the following css (taken from https://kriesi.at/support/topic/color-section-responsive-background-image-scaling/) to mitigated the problem:
.avia-section, .avia-section .av-parallax-inner { background-size: contain !important; }However, there are still undesirable effects.
Hey!
Actually posting a message, does not bump the question, but send it to the end of the support line.
Can u point out to us the ” undesirable effects “, because I could not locate them.Thanks a lot for your time and patience
Best regards,
BasilisInteresting, did not realize that. Thanks for letting me know.
Video of with the code snippet:
http://screencast.com/t/DFxqWtoHuh.avia-section, .avia-section .av-parallax-inner { background-size: contain !important; }Video without the code:
http://screencast.com/t/lGnDF3RwiNotice that with the code snippet that there is a fairly large white space gap between the color section and the content of the page. Without the code the picture is completely blown up to maximum resolution.
Also, when I try to access the Media Library from within a post it doesn’t load.
http://screencast.com/t/MlpM0LTioVideo of with the code snippet:
http://screencast.com/t/DFxqWtoHuh.avia-section, .avia-section .av-parallax-inner { background-size: contain !important; }Video without the code:
http://screencast.com/t/lGnDF3RwiNotice that with the code snippet that there is a fairly large white space gap between the color section and the content of the page. Without the code the picture is completely blown up to maximum resolution.
Also, when I try to access the Media Library from within a post it doesn’t load.
http://screencast.com/t/MlpM0LTioHey!
Did you read the foot note on the previous thread?
The background-size “cover” value will keep the image’s aspect ratio but it may cut off parts of the image. The “contain” or “100%” value will keep the whole image visible in the container but it may distort the images.
One workaround is to create another color section with a background image cropped specifically for mobile. Or use the full width easy slider. Toggle the display of the elements by using css media queries. Example here:
Regards,
IsmaelThanks Ismael, I did read that. I couldn’t figure a fix around this, especially since it works on the normal theme and not the child theme. I reverting back to using just the standard theme without the child theme. This seems to have fixed the issue.
- You must be logged in to reply to this topic.