CSS3 Media Queries

Hello,

I’ve set this CSS code for tabs in single product page:

.product-tabs-wrapper
{ width: auto;
margin-right: 400px;
margin-left: auto;
border: solid;
}

It does indeed what I wanted (to allign tab content to product image and product info above, in order to leave blank space to the right) but the problem is: when the screen gets smaller in responsive mode the right margin pushes the content leftward.

I looked into it a bit and found out about @media screen and min-width: query and wrote this:

@media screen and (min-width: 800px) {
#product-tabs-wrapper
{ width: auto;
margin-right: 400px;
margin-left: auto;
border: solid;
}}

but it doesn’t work. Is there a way to achieve that?

Also, is there a CSS code to make single product page sidebar invisible on mobile?

Many thanks,

Regards

Hi,

Actually, you don’t need to write media queries since we have already done it for you. You can just apply different CSS code for different devices adding it to our Custom CSS fields. In Theme Settings -> Custom CSS you can find a few areas for all devices.

Regards

Right. Well done, I didn’t notice.

Anyway, I can’t come up with the right code: I’ve set custom CSS

.sidebar-right.area-sidebar-product-single {
visibility: hidden;
}

for mobile, and it does work but not the way I want. It keeps showing me blank space where the sidebar was supposed to be, without the content (the widget I use in desktop only). I would like the sidebar to disappear completely on mobile, is there a way to do it?

Plus, the code

.product-tabs-wrapper
{ width: auto;
margin-right: 400px;
margin-left: auto;

doesn’t work the way I thought: as product page layout adapts to different screen sizes, so does the right margin. Right now it works perfectly with the monitor I use (14” wide). Is it possible to align tabs right margin to product info right margin, making it fixed? Settings I use are: wide layout, non full width single product page, medium sidebar to the right.

Thank you!

Hi,

Use this for the sidebar instead

.sidebar-right.area-sidebar-product-single {
display: none;
}

Could you please prepare a screenshot of what do you want to do with the product page?

Regards

Hi,

sorry for the late reply. Thanks for the code!

Find attached two snapshots, in the first one right margin of product tabs is aligned, in the second one I have a smaller windows resolution and right margin of product tabs is pushed to the left, I would like it to stay aligned, regardless of windows resolution (with bigger resolutions the problem is the other way round). I don’t think there is a fix, but in case you come up with one… 🙂

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

body .product-tabs-wrapper {
    margin-right:auto;
    max-width: calc(68.5% + 17px);
    margin-left: 2.5%;
}
body .product-tabs-wrapper .container {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1400px) {
	
	body .product-tabs-wrapper {
		max-width: calc(72% + 17px);
	}
}

@media (max-width: 1024px) {
	
	body .product-tabs-wrapper {
		max-width: calc(69.5% + 17px);
	}
}

@media (max-width: 767px) {
	
	body .product-tabs-wrapper {
		max-width: 100%;
		margin-left: 0;
	}
}

Regards

Awesome, thanks a lot!

You are welcome!

[Author]

Posts