How can I change the Instafeed background color on my website?

Solved

How can I change the Instafeed background color on my website?

denise99lau
Excursionist
12 1 0

I'd like to change the background color from white to black on my website

 

Does anyone know how to do this, please? 

 

https://giuliettalounge.com/password

 

PW: eskahl

Accepted Solutions (5)

denise99lau
Excursionist
12 1 0

This is an accepted solution.

I'd also like to reduce the line spacing of the footer in mobile view

View solution in original post

Moeed
Shopify Partner
4304 1105 1354

This is an accepted solution.

Hey @denise99lau 

 

Follow these Steps:

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

4) Add the following code in the bottom of the file above </body> tag

<style>
section#shopify-section-template--15077705810029__17054624707bb4845b {
    background: black !important;
}
</style>

RESULT:

Moeed_0-1705749397725.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

webwondersco
Shopify Partner
1113 165 162

This is an accepted solution.

@denise99lau , Hope you are doing well.

 

Please add the below line of CSS code at the end of your base.css file. You can find this file in the assets folder.

 

#shopify-section-template--15077705810029__17054624707bb4845b{
background-color:#000;
}

 

the output is like the attached screenshot.

 

webwondersco_0-1705750131012.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

webwondersco
Shopify Partner
1113 165 162

This is an accepted solution.

@denise99lau , Please add the below line of CSS code at the end of your base.css file.

 

@media(max-width:767px){
.footer .footer-block__details-content .list-menu__item--link {
    padding-top: 0;
    padding-bottom: 0.5rem;
}
}

 

After adding the above style it'll look like the attached screenshot.

 

webwondersco_1-1705750362668.png

 

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

webwondersco
Shopify Partner
1113 165 162

This is an accepted solution.

@denise99lau Please add the below line of CSS code to reduce the font size.

 

.footer .footer-block__details-content .list-menu__item--link{
font-size:13px;
}
.footer-block__details-content.rte{
font-size:14px;
}

 

13px is for the link and 14px is for the content. You can update the px value it as per your requirements. 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

Replies 10 (10)

denise99lau
Excursionist
12 1 0

This is an accepted solution.

I'd also like to reduce the line spacing of the footer in mobile view

webwondersco
Shopify Partner
1113 165 162

This is an accepted solution.

@denise99lau , Please add the below line of CSS code at the end of your base.css file.

 

@media(max-width:767px){
.footer .footer-block__details-content .list-menu__item--link {
    padding-top: 0;
    padding-bottom: 0.5rem;
}
}

 

After adding the above style it'll look like the attached screenshot.

 

webwondersco_1-1705750362668.png

 

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
denise99lau
Excursionist
12 1 0

Thank you very much for the replies. It helped in a second. Can I also know how to reduce the size of the text in the footer in both website and mobile view please?

 

webwondersco
Shopify Partner
1113 165 162

This is an accepted solution.

@denise99lau Please add the below line of CSS code to reduce the font size.

 

.footer .footer-block__details-content .list-menu__item--link{
font-size:13px;
}
.footer-block__details-content.rte{
font-size:14px;
}

 

13px is for the link and 14px is for the content. You can update the px value it as per your requirements. 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
denise99lau
Excursionist
12 1 0

Thanks again! 

 

 

Moeed
Shopify Partner
4304 1105 1354

This is an accepted solution.

Hey @denise99lau 

 

Follow these Steps:

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

4) Add the following code in the bottom of the file above </body> tag

<style>
section#shopify-section-template--15077705810029__17054624707bb4845b {
    background: black !important;
}
</style>

RESULT:

Moeed_0-1705749397725.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
denise99lau
Excursionist
12 1 0

Thank you so much for your help!

Moeed
Shopify Partner
4304 1105 1354

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
denise99lau
Excursionist
12 1 0

I'd like to know how to reduce the size of the text in the footer in both website and mobile view please?

 

webwondersco
Shopify Partner
1113 165 162

This is an accepted solution.

@denise99lau , Hope you are doing well.

 

Please add the below line of CSS code at the end of your base.css file. You can find this file in the assets folder.

 

#shopify-section-template--15077705810029__17054624707bb4845b{
background-color:#000;
}

 

the output is like the attached screenshot.

 

webwondersco_0-1705750131012.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram