how to get rid of horizontal scroll

[Advertfox]

hi, how can i get rid of horizontal scroll  ?

here is my store link https://rustic-rack-clothing-co.myshopify.com/

pass is advertfox

[theycallmemakka · Accepted solution]

Hi @Advertfox ,

Try adding this code at the end of theme.liquid file.

<style>
body {
    max-width: 100vw!important;
    overflow-x: hidden!important;
}
</style>

[theycallmemakka · Accepted solution]

Hi @Advertfox ,

Try adding below code at the end of theme.liquid.

<style>
.newsletter-form__button {
    width: fit-content;
    padding: 1rem;
    font-size: 1.6rem;
    background-color: #F78C60 !important;
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.5);
  
}
.newsletter-form__button .icon {
    width: fit-content;
    display: none;
}
.newsletter-form__button:after{
    content: "Subscribe";
    font-weight: 700;
}
</style>

[theycallmemakka]

hI @Advertfox ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
header.header.header--top-center.page-width.header--has-menu nav.header__inline-menu {
    max-width: 100%!important;
}
</style>

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Advertfox]

it's not working, shows white space in both ends

[theycallmemakka]

do you want this section to be unscrollable?

[Advertfox]

i think the scroll shows cause of the header menu strip but im not sure 

[theycallmemakka · Accepted solution]

Hi @Advertfox ,

Try adding this code at the end of theme.liquid file.

<style>
body {
    max-width: 100vw!important;
    overflow-x: hidden!important;
}
</style>

[Advertfox]

it worked !!! thanks a lot

[Advertfox]

can you please also help me to keep subscribe button in footer instead of arrow, i was able to do it in section but its not changing in footer, thank you

[theycallmemakka]

Can you let me know which design of botton are you looking for in the footer form? If its just "Subscribe text", you can add below code on the theme.liquid file.

<style>
.newsletter-form__button {
    width: fit-content;
    padding: 1rem;
    font-size: 1.6rem;
    
}
.newsletter-form__button .icon {
    width: fit-content;
    display: none;
}
.newsletter-form__button:after{
    content: "Subscribe";
}
</style>

[Advertfox]

i want the same which is on my home page

[theycallmemakka · Accepted solution]

Hi @Advertfox ,

Try adding below code at the end of theme.liquid.

<style>
.newsletter-form__button {
    width: fit-content;
    padding: 1rem;
    font-size: 1.6rem;
    background-color: #F78C60 !important;
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.5);
  
}
.newsletter-form__button .icon {
    width: fit-content;
    display: none;
}
.newsletter-form__button:after{
    content: "Subscribe";
    font-weight: 700;
}
</style>

[Advertfox]

it workeddddd !!!!! thanks a lot, can i make input field background white ?

[theycallmemakka · Accepted solution]

Replace the old code with this new one to turn the background white.

<style>
.newsletter-form__button {
    width: fit-content;
    padding: 1rem;
    font-size: 1.6rem;
    background-color: #F78C60 !important;
    border-top: 1px solid rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.5);
  
}
.newsletter-form__button .icon {
    width: fit-content;
    display: none;
}
.newsletter-form__button:after{
    content: "Subscribe";
    font-weight: 700;
}
.newsletter-form__field-wrapper .field__input {
background: #fff;
}
</style>

[Advertfox]

you are awesomeeeeee !!! thank you