Jump to content

Resizing/shifting image for mobile

Go to solution Solved by Beyondspace,

Recommended Posts

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

Hi I have two problems I was hoping to get help with! I am a complete n00b at CSS.. 

Password : hellojimmy

1. On homepage, I would like to shift and resize the background image on my mobile view to the left as it completely cuts off the main part of the gif and was hoping to shift it so on mobile you would be able to see more of the bunny.

Mobile view:

Mobile_1.thumb.png.aff3d7f11bd25caef4f41906689ed5fd.png

Desktop view:

Background_1.thumb.png.7a91bdec3acea4ef64d98dee54fe0dfb.png

2. On https://madebykubeba.com/gallery/mural the image is completely cut off on mobile view and I was hoping to resize it so we can see the full image !

Mobile view:

Mobile_2.thumb.png.b74880e02ebb8ba04424541fe3bb9234.png

Desktop view:

Image_2.thumb.png.ce6462e55b6a56958f67f5d84c1cacee.png

Thank you!!

Link to comment
  • Solution
1 hour ago, Jnguy said:

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

Hi I have two problems I was hoping to get help with! I am a complete n00b at CSS.. 

Password : hellojimmy

1. On homepage, I would like to shift and resize the background image on my mobile view to the left as it completely cuts off the main part of the gif and was hoping to shift it so on mobile you would be able to see more of the bunny.

Mobile view:

Mobile_1.thumb.png.aff3d7f11bd25caef4f41906689ed5fd.png

Desktop view:

Background_1.thumb.png.7a91bdec3acea4ef64d98dee54fe0dfb.png

2. On https://madebykubeba.com/gallery/mural the image is completely cut off on mobile view and I was hoping to resize it so we can see the full image !

Mobile view:

Mobile_2.thumb.png.b74880e02ebb8ba04424541fe3bb9234.png

Desktop view:

Image_2.thumb.png.ce6462e55b6a56958f67f5d84c1cacee.png

Thank you!!

Add this to Design->Custom CSS

@media only screen and (max-width: 768px) {
  section[data-section-id="5f9d474211f67f690aa7722c"] {
    min-height: inherit !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .section-background img {
     object-position: 75% !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .portfolio-hover[data-mode="hover-cover"] .portfolio-hover-display {
    height: 100vh;
  }
}

image.png.0ca2835738a50d15ec9f9ee044fc3bc0.png

image.thumb.png.83a90052f24fed5304c2b99220ff250f.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
2 hours ago, Jnguy said:

I've also been having a problem with a white bar appearing at the bottom of the screen.

The height of the image/page section is not enough to fill the height of the window in some cases. In those cases a background color is showing through.

Add the following to Design > Custom CSS.

.homepage #siteWrapper {

  background-color: #AAFCFC;
  
  }

This is for a v7.1 and will only work on the home page.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@creedon Thank you so much! I tried adding it but didn't work or there were problems. I'm not sure how I would add it into my current CSS, could you show me how I should write it when my current CSS is this: 

@media only screen and (max-width: 768px) {
  section[data-section-id="5f9d474211f67f690aa7722c"] {
    min-height: inherit !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .section-background img {
     object-position: 75% !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .portfolio-hover[data-mode="hover-cover"] .portfolio-hover-display {
    height: 100vh;
  }
}

I am also looking for help to show the full image of my image on https://madebykubeba.com/gallery/mural (shown with red arrows on the picture)? It is still somewhat cut off at the top and bottom. Password : hellojimmy

 1183273417_Screenshot(153)_LI.thumb.jpg.64b9602587f702937eee725ef943a4e0.jpg

Link to comment

Add it right under whatever you have in Design > Custom CSS already. Like so...

@media only screen and (max-width: 768px) {
  section[data-section-id="5f9d474211f67f690aa7722c"] {
    min-height: inherit !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .section-background img {
     object-position: 75% !important;
  }
  [data-section-id="5f9d228a501b164da38d4f09"] .portfolio-hover[data-mode="hover-cover"] .portfolio-hover-display {
    height: 100vh;
  }
}

.homepage #siteWrapper {

  background-color: #AAFCFC;
  
  }

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 11 months later...

Good morning folks!!

I'm looking for some similar help. Here's link to my page: www.successisalifestyle.com/earlyaccess

I'm attempting to shift the background image to the right on Mobile views so that the art work is in the center.

Any assistance would be greatly appreciated..

Thanks in advance!!

~JQ

Link to comment
3 hours ago, IIIJQIII said:

I'm attempting to shift the background image to the right on Mobile views so that the art work is in the center.

Any assistance would be greatly appreciated.

I suggest setting the focal point of your image to the left of its current position.

It is probably in the center now.

1823811834_ScreenShot2022-01-05at10_52_20AM.png.ed903d1327015a0554bb010f4a99e398.png

After set a left of center over The Journey.

114355135_ScreenShot2022-01-05at10_55_03AM.png.fdc4016b7a9b23afc1dab9577c3f9012.png

1718787770_ScreenShot2022-01-05at10_55_39AM.thumb.png.91b45b6ea27e46e0daad3c24b65effb2.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...
On 5/4/2022 at 8:04 PM, noble__studio said:

I also have something which I'm trying to adjust the sizing of which is the new 'art background' feature.

For desktop the setup looks great but it resizes it too far for mobile/tablet... www.noble.studio

Anyone know of anyway to adjust this with code or something??

Hi,

Which page are you referring to?

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.