Edit Foot Mobile

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

Hello,

https://www.ghoulsmagazine.com

On mobile view my footer is huge as everything stacks up.

Would it be possible to have the footer Logo and links reduced in size and on the same level like on Desktop view and relocate the Newsletter subscription field under them?

thanks for your help

You want mobile layout same as screenshot above?

Hi @tuanphan  yes.

Ghouls magazine logo + links (about, contact...) on the same level and the newsletter fielD below them as I don’t think you can have all 3 items on same level like in the desktop view

Hi @tuanphan, just wondering if you had a chance to look into this 😊

thank you!

On 1/27/2021 at 11:06 PM, Karkom said:

Hi @tuanphan, just wondering if you had a chance to look into this 😊

thank you!

Add to Design > Custom CSS

/* Mobile footer */
@media screen and (max-width:767px) {
div#page-section-5fe76a518d20536a3fbd7278>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
}

Hi @tuanphan Thank you so much it’s definitely much better now already!

 There a way to force the 3 social icons on one line and to have the newsletter section to be stretched rather than squeezed on the right side?

Add this to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('div#page-section-5fe76a518d20536a3fbd7278 .span-9>.row>.span-4').insertAfter('div#page-section-5fe76a518d20536a3fbd7278>.row');
}
});
</script>

Hi @tuanphan thst was great, it worked for a while but now i see this... not sure what happened...:(