Jump to content

How to I resize my banner image or resize my first image to fit the screen on desktop and mobile

Recommended Posts

Site URL: https://www.jennyandstephenwed.com/

I've tried everything including this code, but can't find the image url to put in for each header image.  I want the header / banner image to autofit the screen for each page. Can you help me with the code for desktop and mobile? 

 

#COLLECTIONID {
#page .page-section:nth-of-type(1) {
img {
display: none;
}
.sqs-block-image img {
display: block;
}
.section-background {
background: url("IMAGEURL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}

Link to comment
  • Replies 6
  • Views 1.8k
  • Created
  • Last Reply

Thank you. I tried to add it and it still isn't showing the city skyline in the banner photo. 

image.thumb.png.1e9ef85f3fa31fb5409672225f6ae71b.png

Is the code you provided  in addition to the code I displayed below? 

#COLLECTIONID {
#page .page-section:nth-of-type(1) {
img {
display: none;
}
.sqs-block-image img {
display: block;
}
.section-background {
background: url("IMAGEURL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}

 

Link to comment
  • 2 weeks later...
On 3/15/2021 at 11:22 AM, jenga24 said:

Thank you. I tried to add it and it still isn't showing the city skyline in the banner photo. 

image.thumb.png.1e9ef85f3fa31fb5409672225f6ae71b.png

Is the code you provided  in addition to the code I displayed below? 


#COLLECTIONID {
#page .page-section:nth-of-type(1) {
img {
display: none;
}
.sqs-block-image img {
display: block;
}
.section-background {
background: url("IMAGEURL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}

 

Have you solved it yet?

On 3/16/2021 at 6:20 AM, jenga24 said:

?

I don't understand. What is it?

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

Hi there! My site is nearly 100% done but I'm having issues with how my banner image looks on the mobile site (very zoomed in, cuts a lot of the graphics out). I've been following the template I picked as I'm not very familiar with coding. Is there anything I can do to fix the width of the image for mobile viewing?? Please let me know!

 

the website link is https://doggydogydogyall.squarespace.com

 

(I'm changing the domain later)

 

Thank you!

IMG_28DD79433448-1.jpeg

Screen Shot 2021-03-30 at 12.42.15 PM.png

Link to comment
  • 2 weeks later...
On 3/31/2021 at 12:44 AM, Houndie said:

Hi there! My site is nearly 100% done but I'm having issues with how my banner image looks on the mobile site (very zoomed in, cuts a lot of the graphics out). I've been following the template I picked as I'm not very familiar with coding. Is there anything I can do to fix the width of the image for mobile viewing?? Please let me know!

 

the website link is https://doggydogydogyall.squarespace.com

 

(I'm changing the domain later)

 

Thank you!

It looks like you solved with this CSS/

@media screen and (max-width: 800px) {
    body.homepage article section:first-child {
        min-height:20vh !important;
        height: 35vh
    }
}

On this page, you haven't changed SEO Title, so the browser tab name still shows "About 3"

https://doggydogydogyall.squarespace.com/about

Similar on this page, "General 2"

https://doggydogydogyall.squarespace.com/services

and this page "FAQs 1"

https://doggydogydogyall.squarespace.com/faqs-2

 

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

Archived

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.