Archived topic
How to remove borders / boxes around content on mobile?
5 replies · Started by Alex on August 14, 2019
I'm using the Marketer theme. On my site I have removed the borders around the content using CSS and have set the background color to white. However on mobile the borders are still there and the background is the default grey.
This is the code I have used that removes the borders/shadow on the desktop version.
.inside-article {
border-left: 0px solid rgba(0,0,0,.05);
border-right: 0px solid rgba(0,0,0,.05);
border-top: 0px solid rgba(0,0,0,.05);
box-shadow: none !important;
border-bottom: 1px solid rgba(0,0,0,.05);
}I'm styling it after the woorkup site, with only the bottom of the border still active.
Any help with this would be great!
Hi there,
Instead of writing new CSS for it, what if you try to modify this block of existing CSS in Additional CSS field in the customizer?
.inside-article,
.sidebar .widget,
.comments-area {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}Let me know :)
Hey, thanks for the quick reply. Unfortunately it didn't work.
Here is how my css make the desktop site look, with the border only at the bottom. -> https://prnt.sc/ost5mo
and here it is currently on mobile/tablet. -> https://prnt.sc/ost5jt
As you can see my css hasn't changed the border/shadow on mobile and tablet. Not sure why this is?
Does .inside-article not affect it on mobile?
Sorry for the confusion!
Your CSS is wrapped the media query so it's desktop only:
https://www.screencast.com/t/fAT3qvDzJ
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints
Got it now, thanks so much! 😁
No problem :)
