How can I force two content blocks into one column (in the footer) so that it shrinks down on mobile instead of stacking?

Site URL: https://www.venuswtlau.com/

I currently have a sticky footer with a text block and social links block. When switching to mobile view, the two blocks stack on top of each other (making the two content blocks unaligned). Is there any way to force the two blocks together so that they stay in the same row when switching to mobile?

Thank you in advance :)

13 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile footer side by side */
@media screen and (max-width:767px) {
div#page-section-60963f488f966c26e837b484 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

Hi @tuanphan this worked like magic! Thank you so much 🙂

8 hours ago, tuanphan said:

Do you want to fix these?

Site URL: https://www.venuswtlau.com/ (checked on 

1. (Tablet-Header) Want to remove burger, force menu same as desktop?

2. (Tablet-Inclusive-postpartum-care) Reduce this text size?

3. (Tablet) Page looks long. Want to add a back to top button?

 

Hi Tuan,

Yes to all three, please!

Thank you so much for catching these 🙂

On 5/17/2021 at 3:25 PM, venuswtlau said:

Hi Tuan,

Yes to all three, please!

Thank you so much for catching these 🙂

Q1. Q2. Add to Design > Custom CSS

/* Force desktop nav on tablet - version 2 */
@media screen and (min-width:768px) and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
    width: 70% !important;
}
.header-title {
    flex: 50% !important;
}
/* Inclusive */
div#block-99fba9e3f545ec820c66 * {
    font-size: 30px;
}
}

Q3. Follow this guide

On 5/9/2021 at 11:47 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile footer side by side */
@media screen and (max-width:767px) {
div#page-section-60963f488f966c26e837b484 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

I am trying the exact same code to do the same thing, but it won't work, not matter what. Can you help me , please. Here's the site: mashaborak.com - Thank you!!!!

@tuanphanI answered you on another post, feel free to answer here as well, Thanks!

13 hours ago, HunterD said:

@tuanphanI answered you on another post, feel free to answer here as well, Thanks!

I see you solved?