• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

How to center Icons on Front Page 6 Widget

Home › Community Forums › Aspire Theme Support › How to center Icons on Front Page 6 Widget

Tagged: aspire pro, icons

  • This topic has 1 reply, 1 voice, and was last updated 4 years, 6 months ago by webauthor.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • December 5, 2017 at 1:34 am #22143
    webauthor
    Customer

    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.

    December 5, 2017 at 1:42 am #22144
    webauthor
    Customer

    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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 · Appfinite · Built With The Genesis Framework