[Resolved] Aligning Mobile Version: Social Media Buttons and Newsletter Signs-up

Home Forums Support Aligning Mobile Version: Social Media Buttons and Newsletter Signs-up

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1034025
    WAYNE

    Hi there,

    I have some alignment issues on mobile.

    1. How can I aligned my social media buttons in a straight line in mobile version?
    2. I would like my newsletter sign up section to appear on the menu in mobile version.

    #1034151
    David
    Staff
    Customer Support

    Hi there,

    i would suggest using the Off Canvas Panel for your mobile menu:

    https://docs.generatepress.com/article/off-canvas-panel-overview/

    It has its own Widget Area so you can add the social icons there and the sign up form.

    For the social icons use a plugin like Tom’s Lightweight Social Icons you can then use that in the Site Header and remove them from the Menus.

    #1042118
    WAYNE

    Hi David,

    Thanks for that, I managed to use the Off Canvas Panel to resolve this problem, but it creates another problem. I believe it is simple for you. So that I am incapable for handling this minor issue. ;(

    1) On the Desktop version, how can I get the “Social-Sider” back on the menu navigation. It is missing now, comparing to the default theme.

    2) On the mobile version, how can I insert a line break between “About Us” and “Contact Us”

    3) How do I increase the font size of the Off Canvas Panel in my mobile version for “Primary – Sider”, “Social-Sider”, “Newsletter” without affecting Desktop version’s font size?

    my website: http://www.waynetay.com

    Yours sincerely
    Wayne Tay

    #1042170
    David
    Staff
    Customer Support

    1. You can add a Nav Widget for the Social Sider Menu to the Header Widget.2

    2. Customizer > Layout > Off Canvas Panel and increase the Menu Item Height.

    3. Customizer > Typography > Off Canvas Panel and increase the font size.

    Note there are shortcuts in the Customizer so when in Layout there is a shortcut to Typography for that element.

    To increase the widget title – this CSS:

    .slideout-navigation h2.widget-title {
        font-size: 20px;
    }
    #1042924
    WAYNE

    Hi David,

    Thanks for the support, you are wonderful.

    Unfortunately, item 2 and 3 did not really work out for me except for the widget title. To circumvent this issue, I actually increase the padding for top and bottom to create spacing between “ABOUT” and “CONTACT ME” using

     .main-navigation a {
            padding-top: 10px;
            padding-bottom: 10px;
        }

    Now, how can I make the social media icons in a straight line instead only in the mobile version? Thanks so much.

    website: http://www.waynetay.com

    #1043140
    David
    Staff
    Customer Support

    So edit this CSS:

    #menu-social-sider li {
        display: inline-block;
        margin: 0 10px;
    }

    to this:

    #menu-social-sider li,
    #menu-social-sider-1 li {
        display: inline-block;
        margin: 0 10px;
    }
    #1048558
    WAYNE

    Hi David,

    Thanks a lot! It’s works!

    In the mobile version of my website, how do I shorten the white space between “Contact Me” and “Social Media Icon”?

    Thanks.

    #1048672
    David
    Staff
    Customer Support

    Try this CSS:

    .slideout-navigation .inside-navigation .slideout-widget.widget_nav_menu {
        margin-bottom: 5px;
    }
    #1048870
    WAYNE

    thanks!

    #1048878
    David
    Staff
    Customer Support
    #1050270
    WAYNE

    Hi David,

    Good day to you.

    Can you teach me how can I do these:

    1) Desktop version: social media icon menu hover color to be: #0054c9

    2) Mobile version: every menu item “on click” color to be: #0054c9

    3) mobile version: how do I remove the fine black line on the “subscribe” button on iOS safari browser

    #1050670
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1.

    #menu-social-sider a:hover {
        color: #0054c9;
    }

    2.

    @media (max-width: 768px) {
        .site-header .main-navigation a:active, 
        .site-header .main-navigation a:focus {
            color: #0054c9;
        }
    }

    3.

    .mc4wp-form-fields input[type="submit"] {
        border: 0;
    }

    Hope this helps! 🙂

    #1060139
    WAYNE

    Hi Tom,

    Thanks a lot!

    In my article page: http://waynetay.com/uncategorized/dont-just-do-your-job-own-your-job/

    There’s a small dash “-” in between the title of the post and the 1st paragraph of my article.

    How do I:

    1) remove the dash
    2) shift the starting paragraph to the area where the dash is.

    Thank you.

    #1060290
    David
    Staff
    Customer Support

    Hi there,

    in Customizer > Additional CSS remove this:

    .single .entry-header::after,
    .page .entry-header::after{
        border-bottom: 1px solid #000;
        content: "";
        display: block;
        margin-bottom: 40px;
        padding-bottom: 40px;
        width: 2.5%;
    }
    #1061370
    WAYNE

    thank you David. good to hear from you again!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.