Changing order of blocks in mobile view

Site URL: https://www.kindenterprises.co/financial-wellbeing

I'm running into trouble with the mobile version of my banner image. There's a few issues:

1. The text blocks saying 'in partnership with' and 'brought to you by' are reordering weirdly, and the logos have stacked in the opposite direction. Is there an easy work around for this? Ideally it would be great to have them side by side as in the desktop version.
   1. 
2. When on squarespace mobile edit view, the h2 header text 'A new kind of Retirement and Financial Wellbeing Conference' is showing that it has successfully resized, however on my actual mobile phone, the font is huge and a generic font family. I can't work out why there is this discrepancy?
   1. 
   2. 

Would appreciate any help with these! Thank you 🙂

#1. You need to adjust layout a bit.

Try dragging Image Block 1 under Text Block 1 so that it appears a black line, width of line = width of  text block.
Do similar for Image 2, Text 2 then check again on mobile.

#2. Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
#block-f9b2b9bfd773c6d0af80 h2 {
    font-size: 1.5em !important;
}
}

@tuanphan thank you for your guidance.

Unfortunately, my client wants the logos to be horizontal (side by side), at least on the desktop version. 

The code you provided is not doing anything to the header text either - is there anything else that can be done?

Thanks in advance!

@tuanphan UPDATE: I have managed to fix the logo issue.
 

BUT, I am still having problems with the h2 heading text. On mobile editor view the CSS code is showing it works, however on my actual mobile browser (www.kindenterprises.co/financial-wellbeing) the h2 text is still huge.

I am at a loss as to why this might be different?!

On 7/22/2022 at 5:50 PM, tuanphan said:

#1. You need to adjust layout a bit.

Try dragging Image Block 1 under Text Block 1 so that it appears a black line, width of line = width of  text block.
Do similar for Image 2, Text 2 then check again on mobile.

#2. Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
#block-f9b2b9bfd773c6d0af80 h2 {
    font-size: 1.5em !important;
}
}

 

Try add code to Top or Bottom of Custom CSS box. If it still doesn't work, keep the code in Custom CSS, then we can check easier

20 hours ago, tuanphan said:

Try add code to Top or Bottom of Custom CSS box. If it still doesn't work, keep the code in Custom CSS, then we can check easier

@tuanphan I just added it to the bottom of the Custom CSS section, and when tweaking the font size here it is working fine and resizing the header text in the mobile view of the site editor.

It is still not being applied to the actual mobile browser though - text is as big as desktop size.

On 7/27/2022 at 1:04 PM, sa51 said:

@tuanphan I just added it to the bottom of the Custom CSS section, and when tweaking the font size here it is working fine and resizing the header text in the mobile view of the site editor.

It is still not being applied to the actual mobile browser though - text is as big as desktop size.

ah, it looks like some code override it. Try this new code

@media screen and (max-width:767px) {
div#page-section-62be56962aa6181acf3cc42d #block-f9b2b9bfd773c6d0af80 h2 {
    font-size: 1.5em !important;
}
}