We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Homepage unusual line placement?

Solved

Homepage unusual line placement?

Not applicable

On my home page just below the image and before the shop button I have a weird white line that breaks the page into multiple sections.
I dont know why this is showing, Any advice would be lovely!

Thank you in advanceScreenshot 2024-07-12 at 4.42.37 PM.png

Accepted Solutions (3)

BSSCommerce-HDL
Shopify Partner
2305 835 907

This is an accepted solution.

Hi @Anonymous, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

{% if template.name == 'index' %}
<style>
main #shopify-section-template--17256407892068__image_banner_WiXwL .media {
    background-color: #24aed1 !important;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Anshul_arora
Navigator
453 129 105

This is an accepted solution.

Hello @Anonymous ,


Please add the mentioned code at the bottom of the theme.liquid file before </body> tag and save.

 

<style>

section#shopify-section-template--17256407892068__rich_text_h6ebn {
margin: -1px !important;
}

</style>

 


The code helps you remove the unnecessary line in your header section.


Output will be like this -:

Anshul_arora_0-1720767903620.png

Please share if you need any further assistance.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

GTLOfficial
Shopify Partner
881 182 192

This is an accepted solution.

Hello @Anonymous 

Go to online store ---------> themes --------------> actions ------> edit code------->base.css----> line number 1100
search this code

.media > :not(.zoom):not(.deferred-media__poster-button), {
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

and replace with this code

.media > :not(.zoom):not(.deferred-media__poster-button),{
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 473px;
width: 100%;
}

and the result will be
13.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 7 (7)

tiger4
Shopify Partner
7 0 0

no!! that's good!

GTLOfficial
Shopify Partner
881 182 192

Hello @Anonymous 
Please provide the URL of your website.

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

AnneLuo
Shopify Partner
1381 240 281

Hi, @GTLOfficial 

Please share the store URL so that I can assist you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

BSSCommerce-HDL
Shopify Partner
2305 835 907

This is an accepted solution.

Hi @Anonymous, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

{% if template.name == 'index' %}
<style>
main #shopify-section-template--17256407892068__image_banner_WiXwL .media {
    background-color: #24aed1 !important;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Anshul_arora
Navigator
453 129 105

This is an accepted solution.

Hello @Anonymous ,


Please add the mentioned code at the bottom of the theme.liquid file before </body> tag and save.

 

<style>

section#shopify-section-template--17256407892068__rich_text_h6ebn {
margin: -1px !important;
}

</style>

 


The code helps you remove the unnecessary line in your header section.


Output will be like this -:

Anshul_arora_0-1720767903620.png

Please share if you need any further assistance.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

JasmeetVT14313
Shopify Partner
292 63 77

Hi @Anonymous 
Can you try changing the color scheme 1's Background gradient with the blue in above section.

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

GTLOfficial
Shopify Partner
881 182 192

This is an accepted solution.

Hello @Anonymous 

Go to online store ---------> themes --------------> actions ------> edit code------->base.css----> line number 1100
search this code

.media > :not(.zoom):not(.deferred-media__poster-button), {
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

and replace with this code

.media > :not(.zoom):not(.deferred-media__poster-button),{
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 473px;
width: 100%;
}

and the result will be
13.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh