-
Posts
-
HI,
I Have a problem inside color section, the size of image backroung isn’t responsive on mobile devices. What should I do so that the image fits the size of the phone/tablette?
Thank you in advance.
Hey morganeL!
Could you provide us with a link to the site in question so that we can take a closer look please?
Best regards,
RikardHello,
The site is http://www.preventpet.com and post with problem is http://www.preventpet.com/les-problemes-urinaires-du-chat/
Thanks!
i did it here on a test environment for me:
i gave a custom class to the color section (in my case its : background-img-responsive)
and color section is without no borderstyling but with huge padding
than goto quick.css and :.avia-section.background-img-responsive { background-size: cover !important; } .background-img-responsive.avia-section-huge .content { padding-bottom: 15% !important; padding-top: 15% !important; }the paddings : you have to play with a little bit (important is that you have choosen “huge padding” for color section)
you can see the result here (on large screenwidth the overflow is as usual on the bottom.)
http://webers-testseite.de/enf02/color-section-background-image/
did you read it carefully?
Have you set the custom class for the color-section?Custom class for alb elements via : http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
and did you choose for the color-section : huge padding !
no – you did not – because i can see it in your source code
Hey!
Thank you for your replies, sorry I have a bad english… and I had not added the code in the function.php :(
I must add the part of code in each element? or only once in the style.css ?thank you
Hi,
Again…I Followed your advice and add the same lines of code in color-section css .. but in my phone the images are cut , size still does not fit the screen..
Hey!
Please make sure that you clear the cache from your mobile browser and reload a few times to see any changes made.
Regards,
RikardHello!
Thank you for reply.
I clear the cache from my mobile browser (3 times), and I test it with tablet but images doesn’t resize..what mobile and tablet do you have?
what do you see on the testpage i mentioned above:http://webers-testseite.de/enf02/color-section-background-image/
On my iphone it works well
Hi,
I looked on my phone at your demo ” enfold business start-up “. The images of the color-section are not responsives.. the image is centered and cut (vs p.c brower)
The solution that gave me Guenni007, is a resizing image by image, and I have a lots of images…
I think that if there is a solution to adapt the size of the images of this section automatically on all the site and I think the solution would be used on the demo and Support Team would give me, no? But, gave me no answer…
I have to deduct that from it there is no solution?
If it is the case I would like to know please, and I find another option, It would avoid me looking for something which does not exist, It doesn’t matter but it would help me not to waste more time.Best regards
Hey!
It’s still in maintenance mode on my end, could you provide us with a temporary admin login instead please? You can post the details here as a private reply.
Best regards,
RikardHi!
If you set the background-size to cover with some CSS like so.
.avia-section { background-size: cover !important; }It looks fine to me. The cats are still visible on small screens because you have the background position set to center center.
If you want the image to use up 100% of the screen then you could do this.
.avia-section { background-size: 100% 100% !important; }But that would make it distorted depending on how tall the section is.
Cheers!
ElliottThank you for your reply,
I add this code in “custom class” in each section or in the file style.css?
Because I try this and the image size isn’t reduced on mobile device, for example the second image is cut to half of the head of the cat..Best regards
Hi!
If you want the image to be stuffed into the container then you can use the second CSS I posted.
.avia-section { background-size: 100% 100% !important; }Regards,
ElliottMay I piggyback on this same topic? I have tried all the above — and more — to get http://www.voicecarrier.com/hospitality/ resolve correctly in responsive settings. Got rid of the columns. Also tried the Custom CSS Class .no-padding and .mobile-hidden for the color section but it also hides the rest of the elements in the section – of which I need as it’s the content title – not just the background image. The text block element requires right-indentation so it doesn’t cover the left portion of background image. Also tried padding instead of indentation and did not work. Text still goes off the screen on mobile devices.
I don’t even care if background image displays on mobile devices, just need the text. Is there a work around with or without the background image?
Thanks for the help!
- You must be logged in to reply to this topic.