Custom CSS for mobile footer

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

Hi, on my responsive website, I have 2 blocks laid out side by side so that on desktop and tablet they are on the same row (see attached). However, on mobile the 2 blocks stack on top of each other which causes an odd layout because of the alignments of each. Is there any way to keep the social media buttons and the resume button on the same line on mobile?

On 5/24/2021 at 10:17 PM, mpruim said:

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

Hi, on my responsive website, I have 2 blocks laid out side by side so that on desktop and tablet they are on the same row (see attached). However, on mobile the 2 blocks stack on top of each other which causes an odd layout because of the alignments of each. Is there any way to keep the social media buttons and the resume button on the same line on mobile?

Hi. Add to Design > Custom CSS

/* Mobile-icons button side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1569956277536_14900+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
}

@tuanphan Thank you so much! One other quick question about the footer: on desktop the footer doesn't go the full width like the header does. Do you know how I can fix that?

Add to Design > Custom CSS

/* Footer header same width */
footer#footer {
    padding-left: 0;
    padding-right: 0;
}