Text over lapping on image on Mobile Brooklyn Theam

I need help please i am newbee

On mobile version text goes over image and i don’t know how to fix it any easy solution i have zero idea with.

codding

1 Like

@Badmonkey001

can you please share store url

Hi @Badmonkey001 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

You have 2 problems:

  1. You’ve copied/imported your product descriptions from another site (probably) and they contain some invisible HTML formatting which conflicts with your theme styles. Note that not all of your products show this problem, so it must be related to the product description code.

One way to prevent this when copy-pasting is to copy first to simple text editor, like Notepad on Windows or TextEdit on Mac and then copy text from this editor to your product description.

  1. You theme was modified to fix header so it always stays on the screen when you scroll. However, it was not done properly and that’s why there are jumps and bottom of the product description overlaps the recommended products.
    This can be fixed (not 100% proper, but should work) like this:

a) Open your theme.js(.liquid) Asset, find this line:

initStickyProductMeta: function() {

and add return; on the next line:

initStickyProductMeta: function() {
      return;

b) Add this at the very bottom of your theme.scss(.liquid) Asset:

@media screen and (min-width: 591px) {
    .product-single {
        display: flex;
    }
    .product-single__meta, 
    .product-single__media-group-wrapper {
        position: sticky;
        top: 250px;  /* approximate height of your fixed header */
    }
}

Be sure to make a backup theme copy ( Actions=> Duplicate) before attempting these edits!

Thank you for help my store url jolienisa.com

Hi Tim

Appreciate your help I was able to fix it with your solution #1. I am too new to Shopify don’t want to touch coding for now.

THank you for your help