Hi Guys,
I am doing a site here http://www.softwaredesignbiz.com/katrina/
Now on the home page i have applied a 20px padding to all the visual composer elements to have it show nicely on my mobile phone.
But every other page all elements site too far to the left either on a mobile or when you minimize your browser window.
What is the fix here, as i dont really want to have to apply the fix to every element.
Looking forward to your help.
Darren
Hi,
You have to target only the page you want to apply the css on.
For the homepage you can use the .home class – http://screencast.com/t/ivCwl1Mf8Yk
ex.
.home h4 {
color: red;
}To target only the mobiles you can use the @media syntax:
ex.
@media (max-width: 767px) {
.home h4 {
color: red;
}
}This way the color for the h4 element will be changed to red only on the homepage and only on mobiles.
Thank you, Emil G.
Hi Emil,
I understand what you have said, but not sure on exact “element” to fix.
On a mobile emulator website you can see here http://screencast.com/t/DaCDfWvLI
the left margin or padding has been set in each element on the page through Visual Composer modules.
Now as per this screenshot http://screencast.com/t/CSGN7h8ID that there is no padding etc in each Visual composer element.
Is this a bug within the theme?
If tested the theme on a brand new WP install and it does exactly the same. I hope i do not need to apply a fix every time the theme is used.
As to a fix i understand the @media query setting for css. I am wondering to which class i would apply padding or margin too.
Would it be the body??? as it seems to be only the page elements, not the header etc??
Thanks in advance
Darren
Hi,
I don’t thrust mobile emulators, we test on real phones and tablets.
You should make some test on real phones/tablets to see if the result is the same before applying custom css.
Use inspect on the elements you want to target and look for the wrapper. – http://screencast.com/t/2nL7D3mtR
Thank you, Emil G.
Hi Emil,
Thanks for the reply.
I only used the emulator to be able to show you the problem.
I did test on a few mobile phones and had the problem.
On the newspaper demo site there appears to be no issue on my mobile phone. Has some custom css been applied to this site?
I find it strange that out of the box the theme has this issue, as other themes I have not had to mess around with custom css.
I will attempt to apply this custom css, it will be a shame if this does not work as i purchased the theme for a clients site. If it does not work properly it will be a shame as I love the theme . One important part is the client wanted site to be mobile friendly.
I will advise.
That wrapper css appears to have worked… Thanks
