Issues with Mobile & Tablet layout!

[MrWade]

Ok, I do have an issue. I am using the classic core theme/template v8.1.7 here is my issue.

When I modify couple of files from this forum thread:

When I add those 2 files desktop version is fine when I remove the product description tab. Now, when you look at it on mobile and iPad/Tablet everything is small on product page.

Here is my website of a product page https://www.galaxyhomedecor.us/patio-lawn-garden/garden-decor/185-black-bear-solar-statue

How can I fix this?

Thanks
Wade

[Ewonta]

Hello, please send me a screenshot.

[MrWade]

7 hours ago, Ewonta said:

Hello, please send me a screenshot.

Yes, here is the iPad/Tablet and the mobile version:

 

[Ewonta]

You need to change the product template:

themes/classic/templates/catalog/product.tpl

class from col-md-6 to col-md-12 col-lg-6

[MrWade]

1 hour ago, Ewonta said:

You need to change the product template:

themes/classic/templates/catalog/product.tpl

class from col-md-6 to col-md-12 col-lg-6

Tablet/iPad images and text are still to small to read.

[Ewonta]

Add CSS style

themes/classic/assets/css/custom.css

@media only screen and (max-width: 1024px) {
    .product-information .product-description p {
        font-size: 2rem;
    }

    #product #content {
        max-width: 100%;
    }
}

[MrWade]

5 minutes ago, Ewonta said:

Add CSS style

themes/classic/assets/css/custom.css

@media only screen and (max-width: 1024px) {
    .product-information .product-description p {
        font-size: 2rem;
    }

    #product #content {
        max-width: 100%;
    }
}

Still got a problem. The whole thing is to small. Like the footer is to small. Add to cart button is to small and the menu isn't friendly I want that to be a drop down with the hamburger effect.

[MrWade]

Anyone?

[MrWade]

I guess no one is going to help me on this issue.

[Ewonta]

Can you use the arrows in the screenshot to show what exactly is small?

[MrWade]

1 minute ago, Ewonta said:

Can you use the arrows in the screenshot to show what exactly is small?

I said the whole website is still small on the iPad/Tablet version. I have uploaded 3 different images. If. you look on the iPad/Tablet itself you can everything is small like the add to button footer and all the product description/details.

[Ewonta]

On 2/17/2025 at 9:17 AM, Ewonta said:

@media only screen and (max-width: 1024px) {
    .product-information .product-description p {
        font-size: 2rem;
    }

    #product #content {
        max-width: 100%;
    }
}

You need to enlarge all the elements according to the principle described earlier

[MrWade]

Just now, Ewonta said:

You need to enlarge all the elements according to the principle described earlier

I did that. That didn't help. No change.

[Ewonta]

Your changes have applied (screenshot), you need to reset the cache in the admin panel and press ctrl + f5 in the browser, thereby resetting the browser cache.

[MrWade]

I am u

7 minutes ago, Ewonta said:

Your changes have applied (screenshot), you need to reset the cache in the admin panel and press ctrl + f5 in the browser, thereby resetting the browser cache.

I am looking at in on the iPad itself. Not on a computer browser. Plus, look it on a tablet/ipad itself.

[Ewonta]

Your tablet has cached the old styles. You need to clear the cache on it.

[MrWade]

How to make the product listing, text block and new product module on the main page full width on the mobile?

[Ewonta]

Like this 🙂

 

@media only screen and (max-width: 767px) {
  #index .js-product.product {
    padding: 0;
  }
  
  #index .js-product.product .product-miniature {
    width: 100%;
  }
  
  #custom-text img {
    width: 100%;
  }
  
  #custom-text {
    padding: 0 !important;
  }
}

 

[MrWade]

4 hours ago, Ewonta said:

Like this 🙂

 

@media only screen and (max-width: 767px) {
  #index .js-product.product {
    padding: 0;
  }
  
  #index .js-product.product .product-miniature {
    width: 100%;
  }
  
  #custom-text img {
    width: 100%;
  }
  
  #custom-text {
    padding: 0 !important;
  }
}

 

Ok, the new product module images and text is still to small on the mobile.

[Ewonta]

@media only screen and (max-width: 767px) {
    #index .js-product.product .product-miniature .thumbnail-container {
        width: 100%;
    }
}

 

[MrWade]

5 minutes ago, Ewonta said:

@media only screen and (max-width: 767px) {
    #index .js-product.product .product-miniature .thumbnail-container {
        width: 100%;
    }
}

 

Well, that widen the container not the image and text is still to small.