Image scaling on mobiles

Support
#1

Hi there,
Could you please have a look on my website?
Wedding Photography
I have a layout with wide images, which looks great on desktops.
But while on my mobile, only the middle part of the image is visible.

Could you help me to change it, so bigger part, or whole image is visible?
Here is mobile screen shot attached.

#2

Hi There,

Current background image is horizontal, it will work on desktop by default, on mobile/smaller screen size, when screen width is smaller that it’s height, this image width of course will not work. There are few options to solve this issue.
Option 1. Use a different image. On your section, add an ID on the field, for example - my-custom-section. Then add the following CSS:

@media (max-width:480px){
 #my-custom-section{
  background-image: url(https://idophotographydungarvan.ie/wp-content/uploads/2017/06/Wedding-photography-Waterford-Dungarvan-Ireland_01.jpg);
}
}

Replace the image URL with another image where it will fit for mobile. A vertical version of that image where in the the two people is on the middle.

Option 2. Use the same image and just adjust current background position for smaller screen. See this: https://screencast-o-matic.com/watch/cbQF1sIqzB

@media (max-width:480px){
.home div#x-section-1 {
    background-position: 81% 50%;
}
}

Hope this helps.

#3

Hi, that works perfect! I have used the second option, changing the position of the background.
How can I use the same method for the photos below the Section 1 ( either changing position or making them smaller)?

#4

Hi there,

You could try updating the code to:

@media (max-width:480px){
    .home div#x-section-1,
    .home div#x-section-2 {
        background-position: 81% 50%;
    }
}

Hope this helps.

#5

Hi, I’m not sure this piece of code works in this case, can’t see the difference…

#6

Hi,

Please note that the code will only affect on smaller window size(480px).

You can try adding !important or change the max-width

eg.

@media (max-width:767px){
    .home div#x-section-1,
    .home div#x-section-2 {
        background-position: 81% 50% !important;
    }
}

Hope that helps

#7

No change yet.

#8

Hi There,

Please add to the Style box of the column :

background-position: 20% center;

Hope it helps!

#9

Hi,
That’s it! Works great now, thank you!
Could you also help me with sizing down this text, visible on the screenshot all over the website? There is custom headline and normal text field but I have this text displayed multiple times on all pages.

#10

Hi There,

I’d advice that you utilize the Responsive Text Settings.

Play with the compression, min-size and max-size until you get the desired look.

screenshot

Hope it helps,
Cheers!

#11

Thank you for all your help, everything looks much better now!

#12

We’re delighted to assist you with this.

Cheers!