Hi,
I have added some bottom padding to H3 text – this works on desktop view ok.
On both tablet and mobile the padding seems to get reduced to 0… however if i look at the code in dev tools the padding is there (on the element style) but has to be increased to make a difference, or set to none..
So with padding at 50px on the h3… it will not show any padding on mobile / tablet unless i increase through dev tools to 65px or higher? An example page can be seen here:
smc-meljac.co.uk/smcwp/meljacoverview/
Is there a way to adjust this for mobile / tablet view so padding is shown below the h3?
I was trying to use something along the lines of the following but no joy and seems a bit crazy?
@media only screen and (max-width: 767px) {
.padding-bottom:50px; { padding-bottom: 70px !important;
}
Hey SuperManWithATan,
I’m not sure exactly what you are trying to do there, could you post a screenshot of your problem and/or explain a bit further please? This code won’t do anything since you don’t have a selector in the media query:
@media only screen and (max-width: 767px) {
your selector should go here {
padding-bottom: 70px !important;
}
}
Regards,
Rikard
Hi,
An image of what I am trying to do can be seen here – http://i67.tinypic.com/1tt3f9.jpg
It’s adding padding to the H3 at the bottom.
I can get this to work if i change the below code in DEV TOOLS, it’s in the shortcodes.css and i add in padding-bottom:30px;..
So i added this to the Quick CSS and it seems to have worked ok :)
body .av-special-heading .av-special-heading-tag{
padding-bottom:30px;
}
Yes it worked ok – this thread can be closed.
Thanks for your help!