Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 14, 2015 at 7:00 pm #552557
    Julie

    Hello!

    I have added some additional information to the socket (company address and site credit) besides just the copyright notice.

    I am able to manually space it out so there is space between each section on wider screens, but it doesn’t look good on narrower screens.

    Is there a way to set up the socket so these 3 sections stack nicely on narrower screens but still have space between them on wider screens?

    Thanks in advance for any help you can give.

    December 15, 2015 at 2:10 am #552718
    Elliott

    Hey Julie!

    Instead of using nbsp try using this.

    <span class = "socket_spacer" style = "width: 100px;"></span>

    And then add this to your custom CSS.

    @media screen and (max-width: 767px) {
.socket_spacer { display: none; }
}

    Cheers!
    Elliott

    December 15, 2015 at 3:05 am #552747
    Julie

    Hey Elliott,

    Thanks so much for your help. For some reason, it doesn’t seem to be working. The code I used in the Copyright field is below and I used exactly what you gave in Quick CSS, am I missing something?

    December 16, 2015 at 2:28 am #553409
    Elliott

    Hi!

    Oops, switch it to this.

    <span class = “socket_spacer” style = “width: 100px; display: inline-block;”></span>

    Best regards,
    Elliott

    December 16, 2015 at 4:29 pm #553795
    Julie

    This isn’t working either, I’m afraid. :(

    Any other ideas?

    December 16, 2015 at 5:07 pm #553834
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    December 16, 2015 at 5:11 pm #553840
    Julie

    No problem– I already had one set up from a previous issue. :)

    Credentials are below.

    Thanks!

    December 16, 2015 at 5:19 pm #553851
    Yigit

    Hey!

    I entered quotes and double quotes manually, it seems like they have converted while copy pasting and flushed cache. Please review your website now

    Best regards,
    Yigit

    December 16, 2015 at 5:42 pm #553888
    Julie

    Awesome– thank you! I saw it correctly once, then went in to change the width of the spacers since it is a little bit too wide, and now it has reverted back again, so I had to manually replace them again– thank you for letting me know how to fix that.

    The only issue now is the sections are not stacking on mobile views– because each section is a little longer than the screen width, the text all runs together when the spacers are hidden.

    If the entire next section won’t fit on the same line, I would like it to bump down to the next line.

    How can I do that?

    December 22, 2015 at 12:16 pm #556482
    Andy

    Hi!

    not sure what you mean. Can you elaborate please? I think screenshots highlighting what you are talking about would be helpful. Use imgur.com or dropbox.

    Please update to WordPress v4.4 and Enfold v3.4.7.

    Cheers!
    Andy

    December 30, 2015 at 5:39 pm #558512
    Julie

    Hi Andy,

    The issue was that the spacer was showing on screens wider than 767 and it looked off, was breaking in weird places. And on narrower screens, the info was all running together without any extra space or a separator between the sections.

    I added an extra space between sections and changed settings so the spacer is hidden on screens up to 1440px (so there is no spacer until the screen is wide enough to fit all the info).

    I’m happy with it now, you can close this thread.

    Thanks so much for the help!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘How to set up socket to display in 1/3 sections’ is closed to new replies.