-
Posts
-
Hi,
I have a problem with showing images the right way on mobile.
Pictures are getting cut off or zoomed in. Is there anything i can do to decrease this problem?Kind Regards,
Lars LuitenHi Lars,
I’m not sure which images you are referring to, could you post a screenshot highlighting the problem you are having please?
Best regards,
RikardHi Rikard,
Most likely all header images and images on the pages in the grid rows as shown in the link.
The images on the background on mobile are not responsive. I also added some codes to the quick CSS before so i’m not sure if im doing it right.
Is it possible for you to check the codes i have entered, maybe this is where it goes wrong? (login credentials are in the private content)
It would be fine allready if the images on mobile just scale to 100% so the images are shown nicely.Kind Regards,
LarsHi,
Thank you for the update.
The theme automatically crops the background image or let it overflow outside the background positioning area in order to keep its aspect ratio. We can make the image fully visible within the section but will most likely distort the image or create white space around the container. So one solution is to create a duplicate of the same section and use a smaller image that is specifically cropped or resized for smaller screens.
And if you’re seeing zoomed in images on iPad or iOS devices, this might be due to the fixed background attachment property. To fix it, we have to disable the fixed background effect, and revert it back to the default scroll behavior.
@media only screen and (max-width: 989px) { .fullsize { background-attachment: scroll !important; } }// https://caniuse.com/#feat=background-attachment
Firefox does not appear to support the local value when applied on a textarea element.
Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it.
iOS has an issue preventing background-attachment: fixed from being used with background-size: cover – see details
Best regards,Ismael
A background-image is a backgroundimage is a background image.
All kidding aside. You could of course set the color section to follow the aspect ratio of the background image, but you run the risk of making the content too large for the container, which would then be cropped / overlapped.
Example: if you have an Iphone 6, the maximum width is about 375px – with a 16:9 picture you will have about 210px height.
With a font size of 16px and 1.5 times the line height per line, this would be 40px – making about 5 lines at 210px.
Everything above that would be too large.Now you could of course set the property of the background image to “contain”, but then, like Ismael, you would have white areas without image.
See responsive color-section on .: https://webers-testseite.de/terve/
on wide screens this maybe ok – but on smaller screens ?Thank you,
I have duplicated some sections which have background images and a text beside it. And now 1 is turned off for mobile and the other is on but off for computers. this works fine as it’s not necessary for all pages.
Kind Regards,
LarsHi Lars,
Great, thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardHi Rikard,
It works good with the images but i got a problem with the links. Normally if i click on an item in the menu it auto scrolls down to that section.
But because i duplicated sections it wont scroll on desktop or mobile. It depends if i put the section on top of the other. Is there a way to change this? :-)
both sections got the same ID atribute right now.Kind Regards,
LarsHi Lars,
You should be able to get around that if you give the sections different IDs, then duplicate your menu and select to use the new one as you mobile menu under Enfold->Main Menu->General->Alternate Menu for Mobile.
Best regards,
Rikard
- The topic ‘Cropped images on mobile version’ is closed to new replies.