Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Background banner width on Mobile


marketingm

Question

I'm in need of some help, I have spent a lot of time trouble shooting but still can't solve the issue. @tuanphanyou may be able to help?

On the home page, the background image up the top is not compressing correctly to mobile. I used the below code to get it to appear correctly on the portrait version of mobile but now the landscape mobile version looks awful. See screenshots attached. 

 

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

 

 

IMG_7881.jpg

IMG_7882.PNG

Edited by marketingm
Link to comment

4 answers to this question

Recommended Posts

  • 1
On 8/3/2021 at 2:15 PM, marketingm said:

@IgnitePerth thank you, that's much better!

It has chopped the height of the image in half on the desktop version, is there a way this can be fixed?

Screen Shot 2021-08-03 at 5.13.17 pm.png

Don't remove any code in your current code. Add this to Design > Custom CSS. You can adjust 100 to another number

/* desktop homepage */
/* top banner */
@media screen and (min-width:992px) {
.homepage section:first-child {
    height: 100vh !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

I think the trouble you are having is caused by setting the height.

Give this a try instead (in your media query) and let me know how it goes:

.homepage section:first-child {
	/* height: 50vh !important; */
	width: 100% !important;
	min-height: unset !important;
	margin-top: 150px;
}

 

I have just commented out your height declaration for now - if this does what you need it to, you can just remove it!

Edited by IgnitePerth

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

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