Jump to content

Full page-width image

Recommended Posts

I have set all of the margins and padding to zero in an attempt to create a full page-wide image at the top of the page.  On my computer ( 2017 Macbook Air with screen width of 1440px), the image fills the screen and looks great, but I am able to scroll a bit to the right of the page and see a white side stripe.  On computers with a larger screen with, the image no longer fills the entire screen width, there are instead white margins on eat side despite this CSS code: body{width:100%;margin:auto;min-width:600px;max-width:3000px} (The 3000px should accomodate for most larger monitors and laptops).  Is there a reason this is happening, and are there any better ways to achieve the full-width image look?

Thank you!

Link to comment
  • Replies 1
  • Views 794
  • Created
  • Last Reply
25 minutes ago, SquarespaceUser3 said:

I have set all of the margins and padding to zero in an attempt to create a full page-wide image at the top of the page.  On my computer ( 2017 Macbook Air with screen width of 1440px), the image fills the screen and looks great, but I am able to scroll a bit to the right of the page and see a white side stripe.  On computers with a larger screen with, the image no longer fills the entire screen width, there are instead white margins on eat side despite this CSS code: body{width:100%;margin:auto;min-width:600px;max-width:3000px} (The 3000px should accomodate for most larger monitors and laptops).  Is there a reason this is happening, and are there any better ways to achieve the full-width image look?

Thank you!

You can try using the vw and vh unit, 100vw mean 100% actual screen width, same with vh for height

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.