Website header/slideshow/button

Site URL: https://luluthelabel.com/

On mobile view: 

1. How do I make the black header less wide? 

2. How do I edit the photo slideshow width, it does not let me drag it down?

3. How do I edit the button size?

Hello @LULU3. I will be helping you out today. For the header, you can add this code:

@media only screen and (max-width: 767px) {
    .header .header-announcement-bar-wrapper {
        padding-left: 5.5vw !important;
        padding-right: 5.5vw !important;
    }
}

As for the slideshow, you can adjust its width using its own settings—please see the attached screenshots for guidance. For the buttons, simply go to Edit mode > Click on the pencil icon in the top right corner > Click on Buttons and choose the one you want to edit. Then, just adjust the padding to your liking.

Hope this helps!

@Spark-Plugin Thank you. 

1. Please can you confirm where I add this code please? (Custom CSS, Code injection etc) 

2. Regarding the slideshow section, it is because I have it on the carousel setting so does not let me drag it down. Does this require code to amend it's width? 

Hi again @LULU3, this code goes into the CSS box.

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

As for the slideshow, could you please clarify what you mean by "drag down"? I want to make sure I understand your request fully so I can assist you better.

9 hours ago, Spark-Plugin said:

Hi again @LULU3, this code goes into the CSS box.

 

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

As for the slideshow, could you please clarify what you mean by "drag down"? I want to make sure I understand your request fully so I can assist you better.

Hi @Spark-Plugin - This code doesn't work and I'm unsure if I was clear on my request. I would like the black header thinner in height? (blue arrow on image attached)

Regarding the slideshow and 'drag down', I would like the slideshow images to have more height. (red arrow on image attached).

Hi @LULU3, Now it is clear. For the header you can paste the code below, and play around with the px values. As for the slideshow, I am still working on it, will let you know if I find the solution. Thanks:)

@media screen and (max-width:768px) {
.header .header-announcement-bar-wrapper {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}
}

On 10/9/2024 at 9:11 AM, Spark-Plugin said:

Hi @LULU3, Now it is clear. For the header you can paste the code below, and play around with the px values. As for the slideshow, I am still working on it, will let you know if I find the solution. Thanks:)

@media screen and (max-width:768px) {
.header .header-announcement-bar-wrapper {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}
}

 

Thank you, the code worked. If you could let me know if there is an update regarding the slideshow that would be great? 🙂

Hi @LULU3, I am sorry, I have tried everything, but couldn’t make it work, maybe you can try posting it again here and see if someone else can help you 🙂 . 

On 10/8/2024 at 8:54 PM, LULU3 said:

Hi @Spark-Plugin - This code doesn't work and I'm unsure if I was clear on my request. I would like the black header thinner in height? (blue arrow on image attached)

Regarding the slideshow and 'drag down', I would like the slideshow images to have more height. (red arrow on image attached).

@tuanphan are you able to assist with this please? I need to drag the slideshow images block down on mobile so it is longer. It is currently on the carousel setting.