-
Posts
-
Hi,
When I use the diagonal bottom border on the color section, the content (3 columns) has too much padding at the top. To fix this I’ve added css:
div.template-page.content {
padding-top: 0px !important;
}But this doesn’t just change the padding for this color section but for all other content as well.
How can I address just this one section. (the css has to address the large top padding that is set for the columns)Thank you,
LisaHI Victoria,
I decided to use whitespace as padding and have added that where needed, (sorry I hadn’t seen your email yet) But now I want to add the code again:
div.template-page.content {
padding-top: 0px !important;
}
But now this code doesn’t work, the top padding doesn’t get any smaller. I would like the content in the diagonal section to move up about 30px. Can you have a look and see why this code is not working now?
Thank you so much,
LisaHi,
You have cache / performance activates, so that is the reason it does not work out for you.
Best regards,
BasilisHi Basilis,
I don’t know what that means and what I need to do?
How do I get rid off the padding?Another thing; I’ve put an API key in for a Google map but I get this message:
Could not connect to Google Maps with this API Key.
It is not restricted and i’ve tried deactivation all plugins, but nothing has worked.
I have this same problem with another site as well…
I hope you can help me with this.
Thank you,
LisaHi Lisa,
Can you try to create a new google map api key?
I tested it with the api key that I have and it works fine.
Screenshot that it works in private content.Best regards,
NikkoThanks Nikko, for some reason the map is working now!
I still haven’t solved my previous problem though:
This css is not working :
div.template-page.content {
padding-top: 0px !important;
}
the top padding in the home page diagonal section doesn’t get any smaller. I would like the content in the diagonal section to move up about 30px. Can you have a look and see why this code is not working?
Thank you!
LisaHi Lisa,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#diagonal-section-home.avia-section .template-page.content { padding-top: 30px; }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
The css code that you gave me is practically the same as the one I already was using, they both don’t work.
The code that had !important behind it didn’t work:
div.template-page.content {
padding-top: 0px !important;
}The weird thing is when I go to Chrome > Inspect, the top padding (about 50px) lights up on the screen but in the small bottom picture on the right it shows no top padding, just a bottom padding.
I have a screenshot I can send you but I don’t know how…
Can you please have another look?
Thank you,
LisaHi Lisa,
Did you see the message in private? The code is almost the same, except the one I gave you is just for that one section and will not affect all the elements on your website.
Here is the message from private:
The code was not working because you have this code in your Quick css with !important that overrides all the other code added. Please remove it. And then you can use the code given above.
Screenshot is below.
Best regards,
VictoriaHi Victoria,
Even when I use your code, the top padding is still exactly the same. In your screenshot where the red arrow is pointing from: that is the area that is too high, I want to at least halve that area. If you look at the diagonal section on my homepage; all the content is closer to the bottom than the top, not centred.
And if I make the section higher to add a bit more green below the content, it adds all the green at the top and the padding gets even bigger!
I hope you understand what the problem is…
Thanks,
LisaHi Lisa,
I have checked it and the problem was the custom height which was set to 690px, I have reduced it to 470px.
Then for padding I changed it from small padding to huge padding and to make it look centered I have removed this code in Quick CSS:#diagonal-section-home.avia-section .template-page.content { padding-top: 30px; }Let us know if this helps.
Best regards,
NikkoHi,
Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
- The topic ‘Addressing certain columns only with css’ is closed to new replies.