Jump to content

Adjust banner image size+location when on mobile

Recommended Posts

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

Hi folks, 
Does anyone know how to: 
1) Customize the way a parallax banner background image appears on mobile (narrow screens)? Specifically, I'd like to be able to "zoom" in on a background image a certain % and set the position/location of it on the screen when in mobile. 
2) Add a transparent overlay to a banner only on mobile, so that text on top is clearer? 
3) Is there a way to make a parallax banner invisible on mobile? 

Some specific examples below: 

1375053932_WhatsAppImage2021-07-06at17_24_58.thumb.jpeg.bdb47bc33f8f93f04663bbdda3cd4c0e.jpeg2106474408_WhatsAppImage2021-07-06at17_24.58(1).thumb.jpeg.58aaa541e4f7c1d7d57ba21a7a737a99.jpeg

 

The banners look neat on desktop but look pretty horrible on mobile! I'd like to use the left half of the first background so it's all photo (then figure out how to make "What clients say" have a while background....next steps!) and get rid of the background completely on the second image.

Thanks a million! 

Edited by ConviToolbox
Link to comment

Do you still need help on this?

I found some other problems.

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

1. (Tablet – Homepage) “Meaningful change through co-design”, texts are cut off

nicolemarkwick.com-02-min.png

2. (Tablet – Homepage) Equal height all boxes?

nicolemarkwick.com-03-min.png

3. (Tablet/Mobile – About) Image doesn’t show in full size

nicolemarkwick.com-04-min.png

4. (Tablet – Contact/Services) On tablet. texts disappear and layout doesn’t look good.

https://www.nicolemarkwick.com/contact

(Desktop)nicolemarkwick.com-05.2-min-1024x464.png

 

(Tablet)             nicolemarkwick.com-05-min.png

5. (Mobile – Contact)

nicolemarkwick.com-06-min.png

6. (Tablet – Portfolio) Right and left margin have a big gap make content is a bit narrow. Do you want increase content width?

https://www.nicolemarkwick.com/portfolio

nicolemarkwick.com-07-min.jpg

7. (Tablet – Homepage) “implementation” in box 3 don’t lie on the same row

nicolemarkwick.com-03-min.png

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

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.