Tab Additional Information e Review in the product single page
Hi, I would like to know why and how to fix the display error in the "Additional Information" and "Reviews" Tabs. The text is not properly formatted, responsive. happens from mobile. Thanks.
Tab Additional Information e Review in the product single page
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
Thanks
Thanks
You have to narrow content for mobile display.
Please, go to Betheme -> Theme options -> Responsive -> General, and change layot to Force full width.
When you switch that, please, let me know if there is something else that shows incorrectly.
Thanks
Hi, thanks for the reply. Although I have performed this configuration the problem remains.
Did you change it back to default?
Because I am still seeing space that should not occur on the mobile display.
Thanks
Hello,
That's because of your CSS code you provided, you are forcing your content to be strict in some width, you shouldn't do that, BeTheme is already fully responsive, so you dont have to stick with forcing width.
After removing all of these media queries with width attributes, it works fine.
thanks
By removing the code you said from the CSS, the site looks terrible
@media only screen and (min-width: 960px) and (max-width: 1239px) {
#Content { width: 960px; }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#Content { width: 728px; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#Content { width: 420px; }
}
@media only screen and (max-width: 767px) {
#Content { width: 300px; }
}
This is CSS in the tab css muffin option
.highlight-font { font-family: Playfair display, serif; font-weight: 700; font-style: italic; }
/* Menu */
#Top_bar .menu > li > a:after { background: #c4b392 !important; }
/* Shop slider */
.shop_slider .shop_slider_ul li .item_wrapper .desc { background: none; text-align: center; }
.shop_slider .blog_slider_header .title { font-size: 30px; line-height: 30px; }
.shop_slider .blog_slider_header { margin-bottom: 25px; height: 49px; }
.shop_slider .shop_slider_ul li .item_wrapper .desc h4 { font-size: 20px; line-height: 28px; }
/* Products */
.woocommerce ul.products li.product .desc { background: none; text-align: center; }
.woocommerce ul.products li.product .desc h4 { font-size: 20px; line-height: 28px; }
.woocommerce ul.products li.product .desc .star-rating { display: inline-block; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { font-weight: 400; }
.woocommerce ul.products li.product .price ins { font-weight: 400; }
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { font-size: 16px; }
/* Blog */
.post-desc-wrapper h2.entry-title { font-size: 23px; line-height: 25px; }
/* Newsletter */
.newsletter_form > input[type="email"] { display: inline-block; margin: 0 4px 0 0; max-width: 250px; }
.newsletter_form > input[type="submit"] { padding: 8px 15px; margin: 0; }
/* Footer */
#Footer .footer_copy { background: #eaeaea; }
/* Brands */
#brands .items_group { border: 4px solid #e7e0d3; padding-top: 40px; }
#Content {
background-color: #fcfcfc;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
margin: 0 auto;
width: 1240px;
}
@media only screen and (min-width: 960px) and (max-width: 1239px) {
#Content { width: 960px; }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#Content { width: 728px; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#Content { width: 420px; }
}
@media only screen and (max-width: 767px) {
#Content { width: 300px; }
}
Please clear the cache of your browser, I entered the website and it looks correctly now, see the screen:
thanks