Jump to content

Reordering footer blocks on mobile with multiple columns

Recommended Posts

  • Replies 14
  • Views 932
  • Created
  • Last Reply

Hi, Add to Design > Custom CSS

/* Footer mobile order */
@media screen and (max-width:767px) {
div#page-section-6040ce2c69b9ec5adb58e120 .span-12 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/26/2021 at 3:55 PM, bryonymelhuish said:

@tuanphan I've dropped that in the CSS however no changes seem to be happening? Are there any other steps I need to do? Thanks!

I guess you edited something after posting this question?

Use this new code

/* Footer mobile order */
@media screen and (max-width:767px) {
div#page-section-6040ce2c69b9ec5adb58e120>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Yes I do! I've been trying to mess around with the order but haven't quite been able to do it so any help greatly appreciated or that front!

For the homepage I was hoping to go:
Hero Text
Hero Image


'Hello nice to meet you'
Image carousel

 

How we can work together..
Image
Product Photography
Image
Brand Photography
Image
Social Media management
 

 

Link to comment
On 3/31/2021 at 4:09 PM, bryonymelhuish said:

@tuanphan Yes I do! I've been trying to mess around with the order but haven't quite been able to do it so any help greatly appreciated or that front!

For the homepage I was hoping to go:
Hero Text
Hero Image


'Hello nice to meet you'
Image carousel

 

How we can work together..
Image
Product Photography
Image
Brand Photography
Image
Social Media management
 

 

Add this to Last Line in Settings > Advanced > Code injection > Footer > Then save & reload your site & check on real mobile

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// Hero
$('[data-section-id="6040f88ebbcd3b4456265c58"]').insertBefore('[data-section-id="60525b93f424de02d80d7589"]');
  // How we work
  $('[data-section-id="60410bc9d667d703e412393e"]').insertBefore('[data-section-id="60410c00d667d703e41247a3"]');
  $('[data-section-id="60415061c15d572cdeffc15f"]').insertBefore('[data-section-id="60415068a32c6111c2f43a69"]');
}
});
</script>

and add this to Code Injection Header

<style>
  @media screen and (max-width:767px) {
  body.homepage article section:first-child {
    margin-top: 10vh;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/6/2021 at 5:50 PM, bryonymelhuish said:

@tuanphan Great thank you - worked a treat!

Hi. I see the site has some small problems.

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

1. (Mobile-Homepage) Change order of some images-text?

emmaratcliffe.squarespace.com-mobile-hom

2. (Tablet-Homepage) Similar above

emmaratcliffe.squarespace.com-tablet-hom

3. (Tablet-About page) “deliver” text

emmaratcliffe.squarespace.com-tablet-abo

4. (Tablet-About)

emmaratcliffe.squarespace.com-tablet-pro

5. (Tablet-Product Photography) resize button text size?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi @tuanphan Thanks! 
1/2: The order you gave me works fine on a real phone however when you scale the browser they don't stack correctly....Not sure if we can do it a different way? 

3: The font's don't seem to scale the way they used to. Is there a way to stack 1 & 2 on one row and then 3 & 4 underneath on a separate row to avoid the 'r' being dropped? If not I will just tweak the font size on tablet for that section manually. There are minimal views on tablet but it would be good to have it perfected! 😛

4/5: The client wanted all the $$ to be in a row hence the gap inbetween - I'm okay with that button text size as I want to keep it consistent across the whole site! 

Cheers! 
B

Link to comment

1.2. I meant do you want to show image - text - image - text...

or

text-image-text-image

Currently, it is text - image - image - text - text - image

3. Add to Design > custom CSS

/* Tablet process */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-6046008801dcd3572ad33f4e>.row:nth-child(2) .span-3 {
    width: 50% !important;
}
}

image.thumb.png.cfef7b54b550aedbafaf922954ef3e0c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

@tuanphan Hi Tuanphan,

I used the jQuery you shared above to reorder blocks on mobile for a 7.1 site I'm working on. It worked perfectly for the mobile layout! However, when I checked the desktop version after implementing the code, it messed up the order of blocks on desktop. I've removed the code so you can see what the site is supposed to look like. I want it to all stack on mobile in the order that it appears on desktop, but this is a bit more difficult to do since it's one long running section, due to the svg drawing. 

Here is the code I used based on what you shared above: 

<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// Home
$('[id="block-yui_3_17_2_1_1616534876033_9539"]').insertBefore('[id="block-yui_3_17_2_1_1617244295632_10731"]');
$('[id="block-yui_3_17_2_1_1616535620182_17948"]').insertBefore('[id="block-yui_3_17_2_1_1616536459872_18127"]');
$('[id="block-yui_3_17_2_1_1618934611350_9751"]').insertBefore('[id="block-yui_3_17_2_1_1616536459872_18127"]');
}
});
</script>

Here is the site I'm working on: https://drc.squarespace.com/home

Any suggestions? 

Thank you!

Link to comment
18 hours ago, stephanieberbec said:

@tuanphan Hi Tuanphan,

I used the jQuery you shared above to reorder blocks on mobile for a 7.1 site I'm working on. It worked perfectly for the mobile layout! However, when I checked the desktop version after implementing the code, it messed up the order of blocks on desktop. I've removed the code so you can see what the site is supposed to look like. I want it to all stack on mobile in the order that it appears on desktop, but this is a bit more difficult to do since it's one long running section, due to the svg drawing. 

Here is the code I used based on what you shared above: 


<script>
jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
// Home
$('[id="block-yui_3_17_2_1_1616534876033_9539"]').insertBefore('[id="block-yui_3_17_2_1_1617244295632_10731"]');
$('[id="block-yui_3_17_2_1_1616535620182_17948"]').insertBefore('[id="block-yui_3_17_2_1_1616536459872_18127"]');
$('[id="block-yui_3_17_2_1_1618934611350_9751"]').insertBefore('[id="block-yui_3_17_2_1_1616536459872_18127"]');
}
});
</script>

Here is the site I'm working on: https://drc.squarespace.com/home

Any suggestions? 

Thank you!

Answered email.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.