Resizing background image

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 

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

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

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?

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

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

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

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

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

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? 

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? 

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.

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

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;
}
}

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;
}
}

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;
}
}

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

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;
}
}

Thank you so much, that worked! 🙂