How do I make the banners widescreen. It's for. shopify store

Ask the Community Customization
1

Hi all,

I am new to Elfsight. Loving it so far.
I am trying to create a slider banner for the header. I have created it but can’t figure out how I can make it widescreen.
Any help would be appreciated.

Thanks
Carl

3

Hello @Carl2! We are so happy to see you here! Welcome :heart:

Sure thing, we’ll be happy to assist! I’ve forwarded your request to our devs and, hopefully, they’ll come up with a solution really soon.

Please do not worry, we’ll keep you updated :wink:

5

Hi @Carl2 ,

This CSS code should do the trick. You need to paste it into the Custom CSS section of your widget’s settings (the Advanced tab).

.global-styles, #shopify-section-template--15900329738454__1b582b31-f6e0-4afb-be4b-ddda3af34fb9 section {
  max-width: unset;
  width:100%;
}
.global-styles, #shopify-section-template--15900329738454__1b582b31-f6e0-4afb-be4b-ddda3af34fb9 .custom-html-container {
  margin: 0;
}

Please let me know if it works!

1 Like
6

Hi Masha,
unfortunately that didn’t work.I need it to be the full width of the screen.

7

I see that the CSS code was not saved in your widget, so I went ahead and pasted it there for you. It should all work now.
Some of your slides have content aligned vertically (with text on top) and so they can’t be displayed at full width because we need to keep the height of the widget consistent between the slides.

8

Hi Masha,
The banner I wanted widescreen isn’t currently on the website as I couldn’t get it widescreen. You have made the wrong banner widescreen…although it looks good so thank you.

However when I look at the custom CSS box it is empty so I am unsure where you placed the code. If you can let me know where you placed the code, i can do so on the other banners I create.

Thanks
Carl

9

Hi Masha,

Don’t worry. Found it!

10

argh!.
I’ve applied the CSS code in the advanced settings of the banner I need ‘top header’
but it’s still not going widescreen. Before i put it on the site, can you help?

thanks
Carl

11

This code for widescreen just works on one slider banner. I have another one I want to add to the site but the CSS code doesn’t make it widescreen.

.global-styles, #shopify-section-template–15900329738454__1b582b31-f6e0-4afb-be4b-ddda3af34fb9 section {
max-width: unset;
width:100%;
}
.global-styles, #shopify-section-template–15900329738454__1b582b31-f6e0-4afb-be4b-ddda3af34fb9 .custom-html-container {
margin: 0;
}

Can someone help me to make this widescreen.
Many thanks
Carl

12

Hi @Carl2 ,

This code is specific to the section of the page you place you widget in, since the reason the banner is not full width is the styles of that section. If you install the correct widget in the section where you want to see it, I can help you adjust the code accordingly.

Masha

1 Like
13

Thank you. It is the slider at the top of the homepage.
It’s called ‘new header’ in my widgets

Thanks

14

@Carl2 I have adjusted the code and placed it into your widget’s custom CSS for you. I’m sorry it took a while to figure this out. :slightly_smiling_face:

.global-styles, #shopify-section-template--15900329738454__be357ff9-a35b-4119-94f3-fa2fe1b83c42 section {
max-width: unset;
width:100%;
}
.global-styles,  #shopify-section-template--15900329738454__be357ff9-a35b-4119-94f3-fa2fe1b83c42 .custom-html-container {
margin: 0;
width: 100%;
}
1 Like
15

perfect. thank you.

Will this work with any slider

thanks

16

Unfortunately, this is specific to the section in which your widget is placed. If I were to make the code less specific, it would apply to any section on your page, so all of your content - not just the sliders - would be full width with no margins. If we did that, you would need to find a way to add other styles to the rest of the content to make it look as it did before.

However, if you’re familiar with HTML and CSS, you could adjust this code for yourself with any future sliders. Simply find the id of the section in which your new widget is located and replace the id in the code I gave you with that. And if you can’t, we’ll be happy to help you.

1 Like
17

You’ve been really helpful. Next question… is it possible to have the text on the banner line upo on the left on mobile the same as it does on desktop.

Thanks

18

Try adding this code please:

@media(max-width: 550px) {
  .eapp-slider-slide-inner {
    left: 0;
    transform: translate(0, -50%);
  }
  .eapp-slider-slide-component {
    padding-left: 0;
  }
  .eapp-slider-slide-elements {
    text-align: left;
  }
}
2 Likes
19

Wow, that worked perfectly. Thank you

2 Likes
20

Hi Masha,
Hope you’re well.
Are you able to work your magic to make this banner on the homepage full width. I don’t know where to find the section id in order to alter the code.

Many thanks

Screenshot 2023-03-23 at 17.50.37
Screenshot 2023-03-23 at 17.50.371920×987 102 KB

22

Hi @Carl2,

You should be all set, I added the following code to the Custom CSS section of your widget:

.global-styles, #shopify-section-template--15900329738454__35960628-cfe0-42b9-9162-aca23c8b6afc section {
  max-width: unset;
  width:100%;
}
.global-styles,  #shopify-section-template--15900329738454__35960628-cfe0-42b9-9162-aca23c8b6afc .custom-html-container {
  margin: 0;
  width: 100%;
}
1 Like
23

Masha, You are amazing. It is starting to look really good now.
Is it possible to widescreen the Instagram feed. The widget at the bottom of the home screen

Thanks

1 Like