Block order is off on mobile + smaller issues

Site URL: https://cafesoelle.squarespace.com

Hey guys,

Thanks for being an incredible community! 

Created a simple little site for a local coffee bar pro bono during these weird times, anyway, site is looking fine on web/mac, but things are looking a bit weird on mobile:

1. logo is gone on mobile?

2. the order of the blocks are off, should be like this: please see "block_order.png"

3. the blocks are wrapping the text weirdly, please see "text_wrap_1.png" (mobile) vs "text_wrap_2" (how it should look)

That's it. Hoping that some of you guys might be able to help me out.

Thanks so much and have an awesome day! 🙂

Best,
Mads

Anyone?

Q1. In Custom CSS, remove this code

.mobile-nav-toggle-label,.mobile-branding-wrapper {
    display: none !important
}

Q2. Do/will you use Business or COmmerce Plan?

Q3. Because this code

.sqs-block[class*=float-right] {
    float: right;
    margin-left: 17px;
}

2 hours ago, tuanphan said:

Q1. In Custom CSS, remove this code

.mobile-nav-toggle-label,.mobile-branding-wrapper {
    display: none !important
}

Q2. Do/will you use Business or COmmerce Plan?

Q3. Because this code

.sqs-block[class*=float-right] {
    float: right;
    margin-left: 17px;
}

 

Thanks so much for your reply @tuanphan! 🙂

Q1: Got it - thanks ☑️
Q2: Oh, aren't we able to fix that on the personal plan?
Q3: I think this code is generated by Squarespace - what should I add in the custom code to bypass this?

Thanks again!

On 4/28/2021 at 8:42 PM, mabu said:

Thanks so much for your reply @tuanphan! 🙂

Q1: Got it - thanks ☑️
Q2: Oh, aren't we able to fix that on the personal plan?
Q3: I think this code is generated by Squarespace - what should I add in the custom code to bypass this?

Thanks again!

Q2. 2 options

Option 1. Use jQuery to reorder text/image. This require a Business Plan or higher

Option 2. You can add more section under current, then we will check & give the code to show 1 section on desktop, show 1 section on mobile. (This works on Personal Plan)

Q3. Try add to Design > Custom CSS

@media screen and (max-width:767px) {
.sqs-block[class*=float-right] {
    float: none !important;
}
}

8 hours ago, tuanphan said:

Q2. 2 options

Option 1. Use jQuery to reorder text/image. This require a Business Plan or higher

Option 2. You can add more section under current, then we will check & give the code to show 1 section on desktop, show 1 section on mobile. (This works on Personal Plan)

Q3. Try add to Design > Custom CSS

@media screen and (max-width:767px) {
.sqs-block[class*=float-right] {
    float: none !important;
}
}

 

Q2 - option 1. If I upgrade to the Business Plan, what jQuery code should I add to the custom code or code injection?

Q3: That code unfortunately didn't do anything. Is there another way to solve this issue?

Thanks again for helping me out @tuanphan.

Hey @tuanphan 👋 Just checking in to see if you got my reply?

Sorry, I'm overloaded. I bookmarked your questions, will check soon in this week.

26 minutes ago, tuanphan said:

Sorry, I'm overloaded. I bookmarked your questions, will check soon in this week.

Thanks so much @tuanphan. Looking forward to your reply.

On 5/7/2021 at 6:00 PM, mabu said:

Thanks so much @tuanphan. Looking forward to your reply.

Add to Settings > Advanced > Code Injection > Header > Then save & check on real mobile

This code for Image 1 + 2. If it works, I will check other images

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('div#block-00bd54386be681320315').insertAfter('div#block-22ab13433cf7cca3f21e');
  $('div#block-yui_3_17_2_1_1619438981104_91720').insertAfter('div#block-00bd54386be681320315');
}
});
</script>

On 5/9/2021 at 12:46 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Header > Then save & check on real mobile

This code for Image 1 + 2. If it works, I will check other images

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('div#block-00bd54386be681320315').insertAfter('div#block-22ab13433cf7cca3f21e');
  $('div#block-yui_3_17_2_1_1619438981104_91720').insertAfter('div#block-00bd54386be681320315');
}
});
</script>

 

Hey @tuanphan

Thanks so much. I upgraded to Business and added the code to header inside code injection and it looks like it works ✨ I'd very much appreciate if you could check the others out.

Also Q3 (see attached for a reminder) and that's it. 

Thanks so much for helping a brother out. 

Best,
M

yes I understand the issue after looking the screenshots briefly I am facing the similar issue that you mentioned here and looking for the guide.