Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 31, 2023 at 5:39 pm #1409160
    ballindigital

    Hi,

    Home

    I want to display a couple of widgets next to each other.

    Contact Information (#text-2)
    Legal Stuff (#text-4)
    Menu (#nav_menu-2)
    Contact Us (#text-3)

    I want Legal Stuff and Menu to display next to each other.

    I’ve been playing around with ChatGPT to try and configure the CSS and it come up with this:

    @media only screen and (max-width: 767px) {
    #footer .container {
    text-align: center;
    }
    #text-2 {
    width: 100%;
    float: none;
    box-sizing: border-box;
    }
    #text-4, #nav_menu-2 {
    width: 50%;
    float: left;
    box-sizing: border-box;
    }
    #text-4 {
    padding-right: 5px;
    }
    #nav_menu-2 {
    padding-left: 5px;
    }
    #text-3 {
    width: 100%;
    float: none;
    text-align: left;
    box-sizing: border-box;
    }
    }

    It doesn’t quite seem to work.

    The top widget is centred so that’s good. The bottom one is fine.

    I just want to middle ones to display side by side.

    Is this possible?

    Thanks,

    Harvinder

    June 1, 2023 at 4:12 am #1409234
    Ismael

    Hey ballindigital,

    Thank you for the inquiry.

    You can add the following code inside the css media query for mobile view in order to align the first two widgets beside each other and adjust the position of the third widget (#nav_menu-2).

    #footer .flex_column:nth-child(1) .widget {
    width: calc(50%);
    float: left !important;
    clear: none;
}

#footer .flex_column:nth-child(2) #nav_menu-2 {
    width: 100%;
    float: none;
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.

    Best regards,
    Ismael

    June 1, 2023 at 2:56 pm #1409274
    ballindigital

    This actually has aligned the top two widgets which is actually better.

    However.. Is there a way of making the second one align right?

    View post on imgur.com

    June 1, 2023 at 2:59 pm #1409275
    ballindigital

    Also.. I’ve used this css code to make the bottom widget centred.

    #footer .flex_column:last-child .widget {
    text-align: center;
    }
    }

    The button doesn’t look that good.. Is there a way to make it full width instead?

    View post on imgur.com

    June 1, 2023 at 3:00 pm #1409276
    ballindigital

    This is the css code that I’m using:

    @media only screen and (max-width: 767px) {
    #footer .container {
    display: flex;
    flex-wrap: wrap;
    }
    #footer .flex_column:nth-child(1) .widget {
    width: calc(50%);
    float: left !important;
    clear: none;
    }

    #footer .flex_column:nth-child(2) #nav_menu-2 {
    width: 100%;
    float: none;
    }

    #footer .flex_column:last-child .widget {
    text-align: center;
    }
    }

    June 2, 2023 at 4:21 am #1409348
    Ismael

    Hi,

    Thank you for the update.

    To align the second widget to the right, just remove this css code:

    #footer .flex_column:nth-child(2) #nav_menu-2 {
    width: 100%;
    float: none;
}

    Then replace it with:

    .flex_column:nth-child(2) #nav_menu-2 {
    float: right;
}

    And to center align the contact form button, please add this:

    #top .wpcf7-spinner {
    position: absolute;
    bottom: 25px;
    left: 15px;
}

    Again, please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.

    Best regards,
    Ismael

    June 2, 2023 at 12:26 pm #1409387
    ballindigital

    Thank you! Almost there..

    I apologise for not being clear enough but what I meant when I said that I needed to align the second one, I want to align the Legal Information widget to the right on mobile view.

    June 4, 2023 at 4:29 am #1409514
    Mike

    Hi,
    To have the columns next to each other try changing the width: calc(50%); to 43% or less:
    Enfold_Support_2241.jpeg

    Best regards,
    Mike

    June 5, 2023 at 11:36 am #1409606
    ballindigital

    Hey Mike,

    Thanks for getting back to.

    What I mean is I want Legal Information to ‘align right’.

    As in text left align, centre, right align or justify.

    Does this make sense?

    <div style=”text-align:right”>This text will be aligned to the right.</div>

    June 5, 2023 at 12:19 pm #1409619
    Mike

    Hi,
    Ok, first you will need to change the width: calc(50%); to 43% or less as above so the two columns will be side-by-side and then you could add this css for text-align: right;

    @media only screen and (max-width: 767px){
#footer .flex_column:nth-child(1) #text-4 {
	text-align: right;
	margin-right: 0;
    margin-left: 20px;
}
}

    Please see the screenshot in the Private Content area of the expected results.

    Best regards,
    Mike

    June 5, 2023 at 12:31 pm #1409621
    ballindigital

    Mike – amazing! It looks so good now! I really appreciate your patience :)

    June 5, 2023 at 6:42 pm #1409656
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Display Widgets side by side in Mobile View’ is closed to new replies.