Hi chaps,
I’ve searched existing threads to try and resolve this but still no luck.
If you view http://james.artyzans.co.uk/wp/accommodation/ on desktop, I’ve added some padding to the left right of every element down the page to go for a slightly more boxed style for this page in particular. When viewing the same page in mobile view, the columns stack which is totally fine, but the padding associated with each column offsets the elements into very narrow long text paragraphs. Is there a ‘global’ and individual method to make elements ignore the padding up until the theme’s responsive functionality kicks in to display the columns in rows again?
All the best,
James
Hey Jambo,
Try adding this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width:767px) {
.responsive #top #wrap_all .flex_column {
padding: 0 !important;
}
}
Hope this helps :)
Best regards,
Nikko
Hey Nikko,
Absolutely awesome, exactly what I was after!
You even fixed my testimonials which were pencil thin without all this code!
/* resizing testimonial (tablet)
-------------------------------- */
@media only screen and (max-width: 768px) {
#top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {
width: 125%;
left: -75px;
}}
/* resizing testimonial (iPhone 5 portrait)
-------------------------------- */
@media only screen and (max-width: 500px) {
#top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {
width: 130%;
left: -42px;
}}
Great stuff dude!
Thanks,
James
Hi James,
Thanks for your kind words and using Enfold. Glad we could help :)
Cheers!
Nikko