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
  • Created
  • Last Reply

Top Posters In This Topic

You mean first image? Add to Home > Design > Custom CSS

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...

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

Hi,

 

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

IMG_6337.PNG

IMG_6338.PNG

IMG_6339.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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
  • 2 weeks later...
On 11/21/2020 at 6:49 PM, j29 said:

@tuanphan wonder if you could help with this also, I sent you a private msg

Have you solved it yet?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.