- This topic has 1 reply, 1 voice, and was last updated 5 years ago by
.
-
Posts
-
I’m a stickler for aesthetics.
I noticed that when looking at the icons on Front Page Widget 6 via a mobile device – the icons where not centered. They’re off center and to the left. If you go use Google inspector and switch to mobile view, then scroll down to Front Page 6, or look at that widget using your phone – you’ll see what I mean.
http://demo.appfinite.net/aspire/
I figured out how to center the icons by adding this code just under line 3077 in my style.css file.
padding: 0 0 0 0;
So the section starting at 3075 now looks like this:
.left-content,
.right-content {
text-align: center;
/* I added this line below to center icons on mobile view */
padding: 0 0 0 0;
width: 100%;
}I wanted to post this here in the event it helps someone else.
Wes,
I was just thinking that I probably shouldn’t make changes directly to my style.css file in the event there is an update to the theme. I’m using the Simple Custom CSS Plugin. Could you tell me what code I should use with this plugin?
Since this code has something to do with the section titled:
@media only screen and (max-width: 550px)
I know that I can’t simply use:
.left-content,
.right-content {
text-align: center;
/* I added this line below to center icons on mobile view */
padding: 0 0 0 0;
width: 100%;
}I have to somehow reference this @media section but don’t know how. This is where I get confused.
Thanks
- You must be logged in to reply to this topic.