DAWN THEME: INCREASE NEWSLETTER CONTAINER SIZE & CHANGE SALE TEXT COLOR

[skymochi]

Hi, three questions for my website

1. How do I remove the shaded box at the bottom of my mobile menu, and move up the Instagram Icon?

2. How do I increase my newsletter container width, mobile only?

3. How do I change my font color from blue to white?

[DaisyVo]

Hi @skymochi 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

Question 1 will be done with this code 

@media screen and (max-width: 768px){
.menu-drawer__utility-links {
    background: transparent !important;
}
.menu-drawer__utility-links ul.list.list-social.list-unstyled {
    position: unset !important;
    justify-content: right !important;
}
.menu-drawer__localization.header-localization {
    display: none !important;
}
}

Here is the result: https://prnt.sc/MoFKvmGO_vOF

Question 2 will be done with this code 

@media screen and (max-width: 768px){
.footer-block__newsletter {
    width: 100% !important;
}
}

Here is the result: https://prnt.sc/4qvaYwxam5pt

Question 3 will be done with this code

.price__container * {
    color: white !important;
}

Here is the result: https://prnt.sc/ih-4guAZn3gM 

Please paste all 3 codes into the same position I guide you above

I hope this helps

Best,

Daisy

[skymochi]

Hi Daisy, thank you! 
For #3 — do you know how to isolate it so it only affects my collections page but not the product page as well?

[dmitry]

Hello @skymochi 

You can apply these changes to your theme's custom CSS to resolve the issues mentioned above:
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

@media only screen and (max-width: 767px) {
  .menu-drawer .menu-drawer__utility-links {
    display: none;
  }

  .footer .footer-block__newsletter {
    width: 100%;  
  }

  .product-grid-container .grid__item .card-information .price__sale span {
    color: #fff;
  }
}

[MSırac]

Hi Skymochi,

For first error, you should go to edit code and find the component-list-social.css folder. Then, find this code and remove it:

@media only screen and (max-width: 749px) {
    .list-social {
         justify-content: center;
    }
}

then find .list-social and change it as this:

.list-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

then you should find other css folder which named by component-menu-driver.css. And remove this code in it:

.menu-drawer .list-social {
    justify-content: flex-start;
    margin-left: -1.25rem;
}

For second, open base.css and find this code: 

#NewsletterForm--sections--16565348171849__footer {
    width: 100%;
    max-width: 500px;
    padding: 10px; /* remove this line*/
    box-sizing: border-box;
}

remove padding line.
For last, I think you can check the costume part of theme coding is not a healthy solution.

Best,
Buy a coffee for me 🙂 

[theycallmemakka]

Hi @skymochi ,

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

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

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

<style>
@media screen and (max-width: 768px){
    .menu-drawer__localization.header-localization {
        display: none;
    }
    
    .menu-drawer .list-social {
        position: unset;
        justify-content: flex-end;
    }
    
    .footer-block__newsletter {
        width: 100%;
    }
}

.product-card-wrapper .card-information>.price,
.product-card-wrapper .price--on-sale .price-item--regular{
    color: #fff;
}
</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