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

[dmitry_5]

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

[MSirac]

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

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

[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?