Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to decrease mobile header social icons spacing to add an icon

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #245819
    jmontgom
    Participant

    I’m the webs designer for a WordPress site that uses the Espresso theme located and active here:
    http://www.sofiawellman.com/

    If I add an additional social icon (making it 8 icons) using the theme’s option function. It shows all on one line on desktop and larger phones like the iPhone 6 and screens larger. It will bring the additional icon down on a new line on smaller screens like the iPhone 5 and smaller.

    I’m trying to figure out where in the CSS code or add a line of custom CSS and what to change to allow the mobile setting to show all 8 icons on one line in the header of the site. I think if I slightly decrease the amount of space between the icons and decrease the padding or margins on the sides it will put all 8 icons on one line.

    To solve this, do you need the theme php file content? Is a browser’s Web Inspector enough? I’m happy to provide any code necessary to get this resolved. Here is a link to the custom CSS added to the themes site. Some of this code was done by the previous web designer.

    Link to CodePen CSS:
    http://codepen.io/jmontgom/pen/ozkXPk

    Thanks in advance for the help.
    Jay

    #245840
    bearhead
    Participant

    You could try reducing the left margin for the social links on smaller screen widths

    It’s this selector in your css:
    section.social-search a.social

    #245972
    jmontgom
    Participant

    Thanks bearhead! That worked great. Much appreciated.

    Jay

    http://jaymontgomery.com

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.