Image size on mobile site

njkwilson07 · Member · Jan 30, 2017 at 10:15 am
Copy link

Add topic to favorites
The images on the main page is not showing properly when it’s viewed on mobile phones. I’ve had a lot of problems with this as I need them to show a good picture on the desktop site and have managed that but now it doesn’t show well on the mobile. Is there a way round this?

The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Jan 30, 2017 at 10:23 pm
Copy link
Hi there!

It looks like the theme is trying to use the image as a background than as a focal point (this is fairly common with images that have text laid over them).

Give this CSS a try, and let me know how it looks. It should only target the home page, and only on smaller screens where the image currently gets cropped:
```
@media screen and (max-width: 1019px) {
    .home.page .hero {
    padding: 24px;
    background-position: 75% 50%;
}
}
```
njkwilson07 · Member · Jan 31, 2017 at 10:20 am
Copy link
Sorry to be extremely dense but I don’t know how to change anything with CSS… Where do I do that? Thanks for your help!!!
staff-loquaciousloon · Staff · Jan 31, 2017 at 2:12 pm
Copy link
Sorry about that, it looked like you already had some Custom CSS in place so I thought you were already familiar with that bit.

It does look like you’ve managed to add it in since your last post, but just in case – as long as your site has either a Premium Plan or Business Plan, you can add CSS under My Site > Customize > CSS :)

No items found.