[Resolved] Some prod. pages are broken in smaller media screens

[johnaps]

Hello, i often come across some product pages that are broken in smaller media
You can see in the page i sent bellow in 490px and bellow all the way to 300px the page is broken.. I thought it was the header and i have fixed that with css loading in product pages…
Can you check it and maybe help me out?
Much appreciated!

[Tom]

Does this CSS help?:

.product .entry-summary {
    overflow: hidden;
    word-break: break-word;
    max-width: 100%;
}

Let me know 🙂

[johnaps]

Unfortunately only a little!
I think the problem is woocommerce styling somehow. If you see in 320px mode, under the prod. img there is a radio button to choose size this is cut off and if you click on it you can see what happens…
Also in the following page
https://sofianos-orthopedika.gr/%CE%BF%CF%81%CE%B8%CE%BF%CF%80%CE%B5%CE%B4%CE%B9%CE%BA%CE%AC/%CE%AC%CE%BD%CF%89-%CE%AC%CE%BA%CF%81%CE%BF/%CE%BA%CE%B1%CF%81%CF%80%CF%8C%CF%82-%CE%B4%CE%AC%CE%BA%CF%84%CF%85%CE%BB%CE%B1/%CE%BD%CE%AC%CF%81%CE%B8%CE%B7%CE%BA%CE%B1%CF%82-%CE%BA%CE%B1%CF%81%CF%80%CE%BF%CF%8D-%CE%B4%CE%B1%CE%BA%CF%84%CF%8D%CE%BB%CF%89%CE%BD/narthikas-metakarpiou-03-2-032/

even more elements fall out of page…

P.s. when i added your given css it fixed the title i think to be responsive…

Do you have any idea why may this be happening?

Thank you very much for your time and input though, very much appreciated!!!

[Tom]

320px is very, very small.

You could try this:

@media (max-width: 400px) {
    table.variations td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

[johnaps]

ok the breaking of page’s is fixed now thank you very much!! 😀
One last question is if the woocommerce 3rd tab (“reviews”) is supposed to be cut in half at the right edge of the screen…
And also if the radio button is supposed to be cut off in the right…?

[Tom]

WooCommerce isn’t great on mobile, especially if you’re looking at the site at 320px, which is really, really small.

To fix the tabs, you could try this:

@media (max-width: 400px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: column;
    }
}

[johnaps]

Tom you are spot on!! God bless you for the great support! Love you guys!! Send me some sources, as to where so i can give back to you, with some good reviews!

THANK YOU!!

[Tom]

Glad I could help! Reviews are always appreciated over on WordPress.org: https://wordpress.org/support/theme/generatepress/reviews/?filter=5

Thank you! 🙂

[johnaps]

https://wordpress.org/support/topic/the-best-support-out-there-fast-and-modern/

You the least deserve this!! Tell me more places i can review, gladly i ll….

[Tom]

Thank you so much! 🙂

[Author]

Posts