-
Posts
-
Hi,
I am using the Enfold Creative Studio for my website and noticed that it is not fully responsive.
The background that is used for the header position is set to stretch to fit but only does this on the web version. If I check my phone it doesn’t stretch to fit.
Furthermore when I use a section with 1/3 2/3 and in 1/3 is a background picture and in 2/3 text and I have set columns to be equal height, this disappears on mobile versions and the picture is really small.
Can this be fixed, perhaps in general or maybe you can help me out.Hope to hear soon.
Thanks and regards,
SandraHey kardnas,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi Victoria,
My website: http://www.sandrakok.com
Both questions can already be found on the homepage.
Best regards,
SandraHi Sandra,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .flex_column.avia-builder-el-30 { min-height: 400px } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
The code works for the picture with the sails, the one with 1/3 and 2/3 columns with same height.
It doesn’t work for the header, the are not stretched to fit on mobiles. People see a tree, but missing the rest of the picture.
Can you look into this please.Thanks and regards,
SandraHi kardnas,
You can upload screenshots to a service like Dropbox or http://imgur.com and give us the links here.
Best regards,
VictoriaHi,.
Please check out this link to dropbox: https://www.dropbox.com/s/m5c8pk8iple5pw1/Screenshot_20191028-130453_Chrome.jpg?dl=0
It is a screenshot from my phone of the header on the homepage of sandrakok.com. which is showing the issue. Header (background) pic is set to stretch to fit, but isn’t adjusting on mobile.Thanks for the help.
Regards, SandraHi,
Is this an iphone? Is it on retina? If yes the media query should be doubled over size and this should fix the problem.
Best regards,
BasilisHi, no it’s android / Samsung so no retina. But this shouldn’t be the issue as there is no option to use multiple pic sizes. The stretch to fit simply doesn’t work with mobile. That’s the issue/bug.
Hope this can be fixed.Best regards,
SandraHi,
Sorry for the delay. The background actually responds properly, but you’re probably expecting the background to shrink and stretch within the section container. By “stretch”, it means that the image will resize and cover the entire section container — some parts of the image may overflow outside the background positioning area to keep its aspect ratio. You should set the Background Repeat settings to “Scale to fit” if you want the image to be contained within the section container. However, this setting might create spaces around the background image within the section container.
Or you can just use the following css to adjust the background position so that the person is fully visible in the container.
@media only screen and (max-width: 767px) { .home #av_section_1 .av-parallax.avia-full-stretch.active-parallax { background-position: 80% 30% !important; } }Best regards,
IsmaelHi Ismael,
It is better, but this doesn’t solve the issue. See screenshot https://www.dropbox.com/s/pqn38qj1uc0gjfb/Screenshot_20191113-103640_Chrome.jpg?dl=0
No more tree, but me, but still not the full image as I hoped for.
Screenshot is from my mobile Samsung S8.Regards,
SandraHi,
Sorry for the delay. Have you tried setting the Background Repeat settings to Scale to Fit as suggested above? This will display the full image, but will probably create spaces around the section container. You can also replace it with the Fullwidth Slider so that the container responds based on the size of the image slide. Unfortunately, it’s not possible to fit the whole image on mobile view without distorting it, or creating white space around it because the image’s aspect ratio and size doesn’t match with standard mobile screen sizes.
Best regards,
Ismael
- You must be logged in to reply to this topic.