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

Resizing background image


Pinklady

Question

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

Hello, I am trying to resize the background image on the each page of a website I have created. The images are set to full bleed, which looks great on desktop but not on mobile as either side of the image gets cut off. Can anyone help with any coding as to fix this for mobile version. I want to be able to see the images as you see them on desktop but just on mobile, especially on the profile page where the whole idea is to be able to showcase the work. Any help would be greatly appreciated. Thanks, Nadine 

Link to comment

13 answers to this question

Recommended Posts

  • 0
On 7/5/2021 at 3:44 PM, Pinklady said:

Thanks for coming back to me, the page with this issue is https://www.emmasoulsbyflowers.com/portfolio

Try adding to Design > Custom CSS

/* resize portfolio images */
@media screen and (max-width:767px) {
body#collection-60daf724dd38fa259e6a326b section[data-current-styles*="background-width--full-bleed"][data-current-styles*="backgroundImage"] {
    min-height: unset !important;
    height: 35vh;
}
}

 

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
On 7/3/2021 at 9:34 PM, Pinklady said:

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

Hello, I am trying to resize the background image on the each page of a website I have created. The images are set to full bleed, which looks great on desktop but not on mobile as either side of the image gets cut off. Can anyone help with any coding as to fix this for mobile version. I want to be able to see the images as you see them on desktop but just on mobile, especially on the profile page where the whole idea is to be able to showcase the work. Any help would be greatly appreciated. Thanks, Nadine 

Pls show the page with background resize issue

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 7/5/2021 at 3:44 PM, Pinklady said:

Thanks for coming back to me, the page with this issue is https://www.emmasoulsbyflowers.com/portfolio

Do you need support with these problems?

Site URL: http://emmasoulsbyflowers.com

1. (Desktop – homepage) Make nav links on one row?

emmasoulsbyflowers.com-01-min.png

2. (Mobile – homepage) Make images in slideshow full size?

emmasoulsbyflowers.com-02-min.png

3. (Mobile – homepage) Make image full size?

emmasoulsbyflowers.com-03-min.png

4. (Mobile – footer) Move copyright text to bottom of footer?

emmasoulsbyflowers.com-04.png

5. (Tablet – footer) Make privacy… Facebook/Instagram in the same line?

emmasoulsbyflowers.com-05-min.png

6. (Tablet-Homepage) Increase page content width?

emmasoulsbyflowers.com-06-min.png

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

Yes!! Yes please, I was just about to put a note in the forum to get some help with these

Also, when I use the resizing on the other pages, ie Bespoke Services, the image covers the logo (see attached image) - how can I resolve this? 

image.png

Capture.JPG

Link to comment
  • 0
On 7/12/2021 at 7:00 PM, Pinklady said:

Yes!! Yes please, I was just about to put a note in the forum to get some help with these

Also, when I use the resizing on the other pages, ie Bespoke Services, the image covers the logo (see attached image) - how can I resolve this? 

image.png

Capture.JPG

You mean move image under header?

With problem 1 + 2. Add this to Design > Custom CSS

/* nav one line */
.header-title-nav-wrapper {
    flex: 100% !important;
}
.header-display-desktop {
    flex-direction: column;
}
/* Mobile homepage slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}
Quote

if it works, let me know. 
I will send the code to handle issues 3 and 4 in the next day.

 

Edited by tuanphan

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
18 hours ago, Pinklady said:

Yes this has worked thank you so much. If you could send the code for issue 3 and 4 that would be amazing. 

Thank you so much

Q3+4. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* image resize */
[data-section-id="60db1d0116d33a72069a5016"] {
    min-height: unset !important;
    height: 45vh;
}
/* move copyright text */
div#block-yui_3_17_2_1_1624565266542_19173:after {
    content: "© Emma Soulsby Flowers Ltd . All rights reserved.";
    margin-top: 20px;
    display: block;
}
div#block-yui_3_17_2_1_1624957595537_8352 {
    display: none;
}
}

 

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

Thank you so much for your help, it's been amazing an greatly appreciated. 

I have one very last question, I need to fix the main image on the other pages ie Bespoke Services page. Just like you gave me the code to fix the homepage image so that it was full screen but underneath the header text....this was the code you gave me...

The code worked perfectly, but I just wondered how I amend the code to work on the other pages? 

 

/* nav one line */
.header-title-nav-wrapper {
    flex: 100% !important;
}
.header-display-desktop {
    flex-direction: column;
}
/* Mobile homepage slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}
Link to comment
  • 0
On 7/16/2021 at 3:36 PM, Pinklady said:

Thank you so much for your help, it's been amazing an greatly appreciated. 

I have one very last question, I need to fix the main image on the other pages ie Bespoke Services page. Just like you gave me the code to fix the homepage image so that it was full screen but underneath the header text....this was the code you gave me...

The code worked perfectly, but I just wondered how I amend the code to work on the other pages? 

 

/* nav one line */
.header-title-nav-wrapper {
    flex: 100% !important;
}
.header-display-desktop {
    flex-direction: column;
}
/* Mobile homepage slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

Hi. Do/will you use Personal or Business or Commerce Plan?

If Business Plan, try adding this code to Page Header (Hover Page Name on Pages > Main Navigation or Not Linked > Click Gear icon to open Page Header) 

<style>
/* nav one line */
.header-title-nav-wrapper {
    flex: 100% !important;
}
.header-display-desktop {
    flex-direction: column;
}
/* Mobile homepage slideshow */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}
</style>

With Personal Plan, add to Design > Custom CSS

/* nav one line */
.header-title-nav-wrapper {
    flex: 100% !important;
}
.header-display-desktop {
    flex-direction: column;
}
/* Mobile homepage slideshow */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !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
On 9/1/2021 at 3:08 PM, Pinklady said:

Hello again, I was hoping you might be able to help with another website I have Weddings — Twisted Tulip Design (twistedtulipdesigns.co.uk) I'm trying to change the size of the scrolling images on each of the services page in mobile version. Are you able to help with the code for this please? Many thanks

You mean image above What happens next?

Add to Design > Custom CSS

/*
- Resize slide images on Weddings Page on Mobile 
*/
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...