Jump to content

What custom css allows you to see entire image on mobile ?

Recommended Posts

Hello, thank you so much for the help I'm having a problem with seeing the entire image in mobile view I tried the coding from the answer to the question posted named background image resize for mobile, but it still only shows some of the image and I was hopeful that I could see the entire image. Thank you so much !  

This is the one I tried already 

@media screen and (max-width:767px) {
[data-section-id="5e9e1237d6ba4d4117d95d9a"] {
    min-height: 40vh !important;
Link to comment
  • Replies 14
  • Views 747
  • Created
  • Last Reply
  • 4 weeks later...

Hello, I reached out in the past but figured it out, but now im having problem I can't get past. I'm using 7.1 and when I try the <div id=”idname”></div> with # in through link, it only go to the top of the page not where I put the code block? Please help I would really appreciate it.

Link to comment

Thank you so much, the help you give you have no idea. I figured out the code block situation. But I still can't get my mobile view to show entire image/background, the code sent on aug.28th said it had a  syntax error no closing } Thank you btw, The closest I got is:  @media(max-width:767px){
     min-height: 20vh !important;
    height: 50vh !important;
     background-position:center center;
        background-attachment: scroll !important;

Here's my url I would appreciate any help.


Screen Shot 2020-09-28 at 7.54.04 PM.png

Link to comment



I am also having problems with the structure of my website on mobile. I have a slider on the top of my home page, which you can only see parts of the image. I have tried the code:


@media screen and (max-width:800px) {
.homepage #page section:first-child {
    min-height: unset !important;
    height: 35vh;

But I can still only see a fraction of each image. Below this, on the website on computer, there are three elements, organised next to each other, I was wondering if I can organise them like this on mobile too rather than being stacked? Thanks in advance for anyone's help.


My URL is elliotcoulterphotography.com, no password

Screen Shot 2020-09-29 at 10.17.50.png

Screen Shot 2020-09-29 at 10.17.58.png




Link to comment
2 hours ago, TheClimbCollaborative said:

I am also having trouble with this on my website. www.bunburymachinetoolmaintenance.com.au

I would like to be able to view the whole image on mobile view for the second image on the homepage with the people in it as it is on desktop view. 

May someone please provide me with the code?

Add to Home > Design > Custom CSS

/* resize homepage image */
@media screen and (max-width:767px) {
.homepage #page section:nth-child(3) {
    min-height: unset;
    height: 30vh;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 2 weeks later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.