Text overlay on banner misaligned Debut theme on mobile

Store Design
1

Hello,

The text overlay on my site www.dreamlandorganics.com is misaligned and placed above the image on mobile only. Please see screenshot. How do I fix this?

Screen Shot 2022-03-03 at 1.04.03 PM.png
Screen Shot 2022-03-03 at 1.04.03 PM.png2880×1800 956 KB

2

Hi @Dreamland_Dave ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    #shopify-section-16173196175cf2dd2a .hero__inner .page-width {
    position: absolute;
    top: 0;
}

#shopify-section-16173196175cf2dd2a .hero__inner .hero__btn {
    bottom: 25px !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
3

Screen Shot 2022-03-03 at 6.48.40 PM.png
Screen Shot 2022-03-03 at 6.48.40 PM.png2880×1800 1020 KB

Thanks so much! This did work. Now one other question. There seems to be an excessive amount of blank space in between the top navigation and the banner (on both desktop and mobile). I would like to cut the amount of space in half so there is no so much black white space. Could you help me fix this please?

Here is an example of the amount of space I would like between navigation and the banner.

https://secretnaturecbd.com/

Thanks in advance.

4

Hi @Dreamland_Dave ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    #shopify-section-16173196175cf2dd2a {
        padding-top: 0 !Important;
    }
}

@media (min-width: 750px) {
    #shopify-section-16173196175cf2dd2a {
        padding: 0 !Important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

Thank you so much. That did shrink the blank space area. I do feel a little bit more could be taken off however. Would it be possible to cut the black white space in half again between the top navigation and the banner? I would like the same amount of blank space as there is on top of the logo to the left and the top banner. That way the logo would appear vertically centered. Thanks in advance!

6

HI @Dreamland_Dave ,

You try below code in file theme.css:

.template-index .main-content {
    padding-top: 0 !Important;
}

Hopy it can help you. ^^

1 Like
7

Perfect, you’re a genius! Thanks so much!

1 Like
8

@AvadaCommerce Hello, for some reason the text on the top banner is once again getting cut off on mobile for my site www.dreamlandorganics.com. Can you please advise. I’m not sure what happened?

9

Hi @Dreamland_Dave ,

You try below code in file theme.css:

.template-index .main-content {
    margin-top: 35px;
}

Hope it can help you. !

1 Like
10

Yes, that worked. Not sure what happened before.. I did remove a bit if code for something unrelated (breadcrumbs) and somehow it threw it off. But the text on mobile is once again centered. Thanks so much!

11

@AvadaCommerce Do you happen to know how to add breadcrumbs with product-collection navigation? I have tried this forum and google and have not found a suitable solution.

I would actually like breadcrumbs navigation for all pages. Any help would be appreciated.

12

Hi @Dreamland_Dave ,

This is difficult to guide you. Since it is related to custom. If you really believe, you can contact us via email: hutech.nam@gmail.com.

Thanks you.!