Put text blocks side by side on mobile

Hello! I am having a similar issue and tried using some examples above without luck. If someone could help me with this I would really appreciate it. 

Instead of my footer stacked, i would like the logo to be at the top, with the text blocks stacked side-by-side below.

Here is my url: https://printerettepress.squarespace.com/

Password: design

Thank you for any help! Also if the social block could be magically moved beside the 'help' block that would be even better!!

On 1/19/2022 at 8:54 AM, izza.weihaas said:

Hello! I am having a similar issue and tried using some examples above without luck. If someone could help me with this I would really appreciate it. 

Instead of my footer stacked, i would like the logo to be at the top, with the text blocks stacked side-by-side below.

Here is my url: https://printerettepress.squarespace.com/

Password: design

Thank you for any help! Also if the social block could be magically moved beside the 'help' block that would be even better!!

Add to Design > Custom CSS

/* Mobile Footer */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1642647925381_7418+.row>.span-3:nth-child(n+2) {
    width: 50% !important;
    float: left !important;
}
}

You are incredible! Thank you!

I am trying to keep 3 and then 2 columns on mobile version of this page on website: 

https://chartreuse-lime-7f5x.squarespace.com/config/

Any ideas?? I tried to make it all one block and divide the one text block but then of course the text won't stay aligned in columns/match up....

The "The Music" page

On 3/8/2022 at 7:46 AM, mopep said:

The "The Music" page

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-61f30dc9ce25ad162dba28b9 .span-8 .col:nth-child(n+2) {
    width: 40% !important;
    float: left !important;
}
}

Hi @tuanphan, can you help me with my footer as well? I'd like to bring the Pages section and Social Sections side by side, and make the whole footer take up less space overall. 

Site is www.adeptbenefits.com , Employee180! (pass)

On 3/11/2022 at 2:41 AM, dv_louise_designs said:

Hi @tuanphan, can you help me with my footer as well? I'd like to bring the Pages section and Social Sections side by side, and make the whole footer take up less space overall. 

 

Site is www.adeptbenefits.com , Employee180! (pass)

Add to Design > Custom CSS

/* Mobile footer */
@media screen and (max-width:767px) {
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(n+3) {
    float: left !important;
    width: 40% !important;
}
div#page-section-61bd0394f151e77577aaffc3>.row>.span-7 {
    clear: left;
}
}

12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile footer */
@media screen and (max-width:767px) {
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(n+3) {
    float: left !important;
    width: 40% !important;
}
div#page-section-61bd0394f151e77577aaffc3>.row>.span-7 {
    clear: left;
}
}

 

@tuanphan Thank you!! I arranged things a bit again, and I realized I would really like to make it so the Pages part in mobile footer is arranged horizontally (all on one line, to the right) to maintain better balance, rather than all vertically stacked like it is in desktop version. Then would like to move the search bar and rest of the mobile footer up (remove space). Code that might help? Also shrinking search bar in mobile?

8 hours ago, dv_louise_designs said:

@tuanphan Thank you!! I arranged things a bit again, and I realized I would really like to make it so the Pages part in mobile footer is arranged horizontally (all on one line, to the right) to maintain better balance, rather than all vertically stacked like it is in desktop version. Then would like to move the search bar and rest of the mobile footer up (remove space). Code that might help? Also shrinking search bar in mobile?

Try adding to Design > Custom CSS

/* Footer mobile */
@media screen and (max-width:767px) {
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(4) {
    width: 27% !important;
    float: left !important;
}
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(5) {
    width: 73% !important;
    float: left !important;
}

div#block-yui_3_17_2_1_1645244055141_28362>div p:nth-child(2) {display: flex;align-items: center;flex-wrap: nowrap;}
}

On 3/14/2022 at 5:48 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Footer mobile */
@media screen and (max-width:767px) {
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(4) {
    width: 27% !important;
    float: left !important;
}
div#page-section-61bd0394f151e77577aaffc3>.row>.span-1:nth-child(5) {
    width: 73% !important;
    float: left !important;
}

div#block-yui_3_17_2_1_1645244055141_28362>div p:nth-child(2) {display: flex;align-items: center;flex-wrap: nowrap;}
}

 

Hi @tuanphan! That worked, but is there a way to make it so that there is more space between the page names? I can make the font slightly smaller as well. 

4 hours ago, dv_louise_designs said:

Hi @tuanphan! That worked, but is there a way to make it so that there is more space between the page names? I can make the font slightly smaller as well. 

 

edit this code

display: flex;
    align-items: center;
    flex-wrap: nowrap;

to this

    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;

13 hours ago, tuanphan said:

    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;

Amazing, thank you so much!

@tuanphan Thank you for this thread! I have a similar request here. I am close but just need help with the text alignment and padding between rows on mobile.

melinahammer.com/book

pw: melina

In the Upcoming Events section, I am looking to keep it as-is on desktop and pair two text blocks next to each other in mobile view. I'd like to align "Date" and "Event Title" next to each other and then "Location" and "TBD/Get Tickets" Section on the next row and next to each other. I also want the text to appear all center aligned - some is a bit wonky if the title is longer. See below "Now Serving LA - In Conversation with Julia Turshen" is misaligned

I'd also like to decrease spacing between these two rows on mobile so it's clearer which info goes together and leave a bigger gap before the next listed event.

Mobile View:

My code so far:

@media screen and (max-width:767px) {
div#page-section-61f08b5a70fb144f88181a2b .sqs-col-1.span-1 {
 width: 40% !important;
    float: left !important;
  align: center !important;
  }
.sqs-col-2.span-2 {
 width: 50% !important;
    float: left !important;
    text-align: center !important;
  }
}

On 3/28/2022 at 12:50 AM, unavolta said:

@tuanphan Thank you for this thread! I have a similar request here. I am close but just need help with the text alignment and padding between rows on mobile.

melinahammer.com/book

pw: melina

 

In the Upcoming Events section, I am looking to keep it as-is on desktop and pair two text blocks next to each other in mobile view. I'd like to align "Date" and "Event Title" next to each other and then "Location" and "TBD/Get Tickets" Section on the next row and next to each other. I also want the text to appear all center aligned - some is a bit wonky if the title is longer. See below "Now Serving LA - In Conversation with Julia Turshen" is misaligned

I'd also like to decrease spacing between these two rows on mobile so it's clearer which info goes together and leave a bigger gap before the next listed event.

Mobile View:

 

My code so far:

@media screen and (max-width:767px) {
div#page-section-61f08b5a70fb144f88181a2b .sqs-col-1.span-1 {
 width: 40% !important;
    float: left !important;
  align: center !important;
  }
.sqs-col-2.span-2 {
 width: 50% !important;
    float: left !important;
    text-align: center !important;
  }
}

 

Can you disable code temporarily? We can check easier

3 hours ago, tuanphan said:

Can you disable code temporarily? We can check easier

@tuanphan Done.

https://www.melinahammer.com/book

pw: melina

Thank you for looking!

On 3/29/2022 at 10:46 PM, unavolta said:

@tuanphan Done.

https://www.melinahammer.com/book

pw: melina

Thank you for looking!

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-61f08b5a70fb144f88181a2b .span-7 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
}

Hey,

i have a similar problem. The desktop version is fine, but the mobile version is all scrambled. The text below the pictures is displayed in rows, but i want it to be displayed in two columns like in the desktop version. The footer behaved similar, but i could solve the problem with some css-code in a way that i am happy with. Could somebody have a look at my site and help me arrange it the way i want on mobile?

Website URL: https://www.pebimages.de

My problem applies to the "detailed view"-sites that open, when you click on any picture in the portfolio-site.

On 3/31/2022 at 2:27 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-61f08b5a70fb144f88181a2b .span-7 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
}

 

@tuanphan Close here - this code stacks the full event info into two columns like  this:

This code also only works on true mobile, not when I size my screen down to mobile on desktop - I'd like to see this here too.

but i want to achieve different pairings side by side so it's:

column one next to column two

then column three next to column four  + decrease spacing between these two rows so they look like they belong together

then the next row (leave larger padding here to distinguish the next event)

column one next to column two

then column three next to column four

and so on

13 hours ago, Konrad said:

Hey,

i have a similar problem. The desktop version is fine, but the mobile version is all scrambled. The text below the pictures is displayed in rows, but i want it to be displayed in two columns like in the desktop version. The footer behaved similar, but i could solve the problem with some css-code in a way that i am happy with. Could somebody have a look at my site and help me arrange it the way i want on mobile?

Website URL: https://www.pebimages.de

My problem applies to the "detailed view"-sites that open, when you click on any picture in the portfolio-site.

I think, each page, you will need a different code... https://www.pebimages.de/wanderer2

This code for wanderer2, Try adding, to see if it can work on other pages

Add a Code BLock under 2022 Text Block > Paste this code

<style>
  @media screen and (max-width:640px) {
  .columns-12 .span-6 {
    width: 70% !important;
    float: left !important;
}

  }
</style>

Do similar for other pages

I am also trying to get text boxes to appear side by side on my site. It appears fine in desktop view, but on mobile they are stacked.

My site is: https://lakesideskinandlaser.squarespace.com/

The page I am speaking about is the "Laser Hair Removal' page, in the pricing section.

On 10/7/2022 at 5:28 AM, shannonf said:

I am also trying to get text boxes to appear side by side on my site. It appears fine in desktop view, but on mobile they are stacked.

My site is: https://lakesideskinandlaser.squarespace.com/

The page I am speaking about is the "Laser Hair Removal' page, in the pricing section.

Hi,

Did you remove this text? I don't see it now

Hi @tuanphan

I would also love to have the "Previous" and "Next" text blocks at the end of each page to be shown side by side on mobile view, as they do on Desktop view. Example: https://www.anjaemzen.com/ikea-lighting

I looked through the whole conversation above but don't think I could find the exact code for that. Is it possible to fix and can you help me? It would be deeply appreciated 🙂

Thank you and all the best!

Anja

On 10/10/2022 at 8:45 PM, anjaemzen said:

Hi @tuanphan

I would also love to have the "Previous" and "Next" text blocks at the end of each page to be shown side by side on mobile view, as they do on Desktop view. Example: https://www.anjaemzen.com/ikea-lighting

I looked through the whole conversation above but don't think I could find the exact code for that. Is it possible to fix and can you help me? It would be deeply appreciated 🙂

Thank you and all the best!

Anja

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-67c1264c20bb044c5ce1+.row>.span-6 {
    width: 50% !important;
    float: left !important;
}
}

Thank you @tuanphan!

Now it looks great on that specific page (https://www.anjaemzen.com/ikea-lighting), I would just like it to look like that on all project pages i.e. all pages that I link to from https://www.anjaemzen.com/.

How do I do that?

Thank you so much for your help! ❤️