-
Posts
-
Hey jgeorge64uk,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi,
Please disable the layerslider on mobile, then add a Color Section with a background image that is portrait orient, add heading, content and button. Go to Screen Options then Hide on large screens and medium sized screens. Hope this helps.
Best regards,
NikkoHi,
Sorry about that, for the layerslider go to Layerslider WP > Sliders > click on your Slider > Slider Settings > Mobile > Hide Under then add this value: 767px and Save.
Hope it helps :)Best regards,
NikkoThanks!
How do I perform the second part of what you said:
“add a Color Section with a background image that is portrait orient, add heading, content and button. Go to Screen Options then Hide on large screens and medium sized screens. Hope this helps.”Do I need to create a new slider completely that will just be for the mobile devices?
Where is this “Screen options”?Cheers
JoshHi,
Edit the page, then there’s an Avia Layout Builder, use Color Section under Layout Elements, drag it below the Advanced Layerslider, then edit the Color Section, in Section Background (tab) insert a Custom Background Image, you should also see the Screen Options (tab), just click on it and you should see the options I said.
Best regards,
NikkoHi,
1.) Please try to set the color section’s “Section Background” > “Background Repeat” settings to “Scale to Fit”. This option may create gaps or spaces around the image depends on the image’s and container’s size. We can also set the background size property manually to 100% but it will distort the image. The current background size property is set to “cover”. This forces the image to cover the whole container and maintains the image’s aspect ratio. Which one do you prefer?
2.) Yes, this is possible but it will require a lot of modifications and usually creates more issues so we don’t recommend it.
3.) Please set the default body font in the Enfold > General Styling > Fonts panel. You can also adjust it in the Advanced Styling panel.
Best regards,
IsmaelHi Ismael,
1 – I’ve done this although it still does not correct. I literally just want to to fit the whole screen on a mobile device. If the means a distorted image then so be it. I have provided login details below for you to login and take a look. I just want to it sorted ASAP as im waiting to launch my site and this is the last thing holding me up now.
2 – Noted, will leave it how it is then.
3 – Ok thank you
Hi jgeorge64uk,
Here is a possible solution for you:
@media only screen and (max-width: 479px) { .page-id-206 #av_section_1 { background-size: cover !important; } }The image will be stretched and only a part of it will be visible, but it will cover the whole section in the portrait mode.
Let us know if this works for you.
Best regards,
VictoriaThanks for that code, I have added it to the quick CSS in general styling.
Is this the correct place to put it?Also, the image still does not fill the screen on a mobile device, I believe you said this is because of the images aspect ratio.
What aspect ratio does the image need to be to fill the whole screen like in the example i sent across above?Thanks
Hi,
Please remove the previous code and edit the color section with the background. Fill in the Section ID field (ex. “custom-section”) then use the following css code.
@media only screen and (max-width: 989px) { #custom-section { background-size: 100% 100% !important; } }Again, this code may distort the image.
Best regards,
IsmaelHi,
I tried that and it did not work.
This is the 16th comment in this thread now and my issue has still not been resolved.
I would appreciate it if you would just login to the site and try to the code yourself before sending across as we are just wasting each others time and im beginning to lose my patience now.
I don’t believe what im requesting should be this difficult and long winded..
Hi,
The modification is working and the image is a bit distorted as expected. Please remove the browser cache.
Best regards,
IsmaelHi,
This is still not how I wanted it.
I wanted it to fill the whole screen.. like in the example I gave above, heres a link to that example for ease: https://ibb.co/jhWA5HIf im image is too small then please tell me what size in dimensions it needs to be for me to achieve this.
Hi,
I wanted it to fill the whole screen..
Edit the color section then set the “Section Minimum Height” to “100% of the browser height”. Set the background size property to “cover” or “Stretch to fit” if you want the image to cover the entire container without distorting the image.
// https://www.w3schools.com/cssref/css3_pr_background-size.asp
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
Best regards,
Ismael
- You must be logged in to reply to this topic.