Hi - the content within the vertical tab section on this page (https://dunnsconstruction.co.uk/services/) has CSS padding-left:80px applied which I can see here - .tabbed[data-style="vertical_modern"] >div {padding-left:80px}
I can also see a mobile query to override the 80px padding - @media only screen and (min-width: 1px) and (max-width: 999px) .tabbed[data-style*=vertical]>div {width:100%; padding-left:0}, but it doesn't seem to work.
The content of the tabs is too far over on mobile and looks odd.
If I add the above media query into the additional CSS section of the site to add an !important flag on the padding, the tag 'data-style' and the word 'div' appear in red, and it doesn't seem to work at all.
Could you help me with the correct code to enter into the additional CSS editor to override the 80px padding please?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) {
.tabbed[data-style="vertical_modern"] >div {
padding-left: 0px !important;
}
}
Hi - the content within the vertical tab section on this page (https://dunnsconstruction.co.uk/services/) has CSS padding-left:80px applied which I can see here - .tabbed[data-style="vertical_modern"] >div {padding-left:80px}
I can also see a mobile query to override the 80px padding - @media only screen and (min-width: 1px) and (max-width: 999px) .tabbed[data-style*=vertical]>div {width:100%; padding-left:0}, but it doesn't seem to work.
The content of the tabs is too far over on mobile and looks odd.
If I add the above media query into the additional CSS section of the site to add an !important flag on the padding, the tag 'data-style' and the word 'div' appear in red, and it doesn't seem to work at all.
Could you help me with the correct code to enter into the additional CSS editor to override the 80px padding please?
Thanks
Rachel
Hey Rachel Darby,
Thanks for writing in,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (min-width: 1px) and (max-width: 999px) { .tabbed[data-style="vertical_modern"] >div { padding-left: 0px !important; } }Thanks
ThemeNectar Support Team
Sorted, thank you :)