Put text blocks side by side on mobile

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

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f0d09240e6abf13b062e85c>.row:nth-child(2)>.col:nth-child(2) {
    width: 70% !important;
    float: left !important;
}
}

On 7/14/2020 at 11:57 PM, tuanphan said:

@media screen and (max-width:767px) { div#page-section-5f0d09240e6abf13b062e85c>.row:nth-child(2)>.col:nth-child(2) { width: 70% !important; float: left !important; } }

Thank you so much TuanPhan! forgive me, as I wasn't clear on which row I wanted to keep the columns, it's the last row - i want the copyright line and the fb social media logo to both appear side by side. I adjusted your code to reflect that section, but it's no longer working. Can you help me out again? thanks!!

17 hours ago, yazzi said:

Thank you so much TuanPhan! forgive me, as I wasn't clear on which row I wanted to keep the columns, it's the last row - i want the copyright line and the fb social media logo to both appear side by side. I adjusted your code to reflect that section, but it's no longer working. Can you help me out again? thanks!!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f0e2c3a069a674c05a71509>.row {
    display: flex;
    align-items: center;
}
}

Your help is very much appreciated Tuanphan!

Hi Tuanphan, I used the same code structure for the next links on my project pages, but when it's mobile it doesn't maintain the text alignment in desktop.

 https://khaki-orchid-mscf.squarespace.com/ (please look at the first project specifically) PSWD: 1234

6 hours ago, itsquitenice said:

Hi Tuanphan, I used the same code structure for the next links on my project pages, but when it's mobile it doesn't maintain the text alignment in desktop.

 https://khaki-orchid-mscf.squarespace.com/ (please look at the first project specifically) PSWD: 1234

Add to Home > Design > Custom CSS

div#page-section-5fb5a5fd9a71ab326a2ee641>.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Thanks Tuan, when I used that code it center aligns the text in mobile, is there a way to keep "Previous" left aligned and "Next" right aligned, just like how it is in desktop"

Thank you

On 11/23/2020 at 12:34 AM, penpen said:

Thanks Tuan, when I used that code it center aligns the text in mobile, is there a way to keep "Previous" left aligned and "Next" right aligned, just like how it is in desktop"

Thank you

 

 

Hi. Do you still need help on this?

Nope! thank you

Hello @tuanphan I'm also trying to do the same thing. I have 2 text blocks next to each other under one image (looks great on desktop) and I'd like to keep them next to each other on mobile, would that be possible?

attaching screenshot of the section below

https://shallot-flatworm-fyc8.squarespace.com

pw: nico

On 10/11/2021 at 4:29 AM, Nico_Burrito said:

Hello @tuanphan I'm also trying to do the same thing. I have 2 text blocks next to each other under one image (looks great on desktop) and I'd like to keep them next to each other on mobile, would that be possible?

attaching screenshot of the section below

https://shallot-flatworm-fyc8.squarespace.com

pw: nico

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-616257219e24356e78a7e7c4 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

On 10/13/2021 at 12:21 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-616257219e24356e78a7e7c4 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

hello @tuanphan that didnt work, this keeps 2 images on 1 row on mobile.

I would like to keep 1 image per row on mobile just like it is now, but also keep the 2 text blocks below the image next to each other, not 2 text blocks under each other. (attached below is the problem)

@tuanphan this is what I'd like to achieve on mobile

I thought you want to apply on images

Use this new code

@media screen and (max-width:767px) {
div#page-section-616257219e24356e78a7e7c4 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

4 hours ago, tuanphan said:

I thought you want to apply on images

Use this new code

@media screen and (max-width:767px) {
div#page-section-616257219e24356e78a7e7c4 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

that worked perfectly, thank you!

web page - https://disc-cone-hl9f.squarespace.com/giffgaffbigswim

pw : kinglear

Hi.

Is there a way to do this without specifically selecting a page element id?

I have a similar issue on this page, but I'm going to have to duplicate this page quite a few times for different pieces of work and wanted to avoid having to locate the block id for each page if possible?

On 10/21/2021 at 10:30 PM, kinglear said:

web page - https://disc-cone-hl9f.squarespace.com/giffgaffbigswim

pw : kinglear

 

Hi.

 

Is there a way to do this without specifically selecting a page element id?

I have a similar issue on this page, but I'm going to have to duplicate this page quite a few times for different pieces of work and wanted to avoid having to locate the block id for each page if possible?

Hi,

I don't see text blocks on this page? https://disc-cone-hl9f.squarespace.com/giffgaffbigswim

Sorry, @tuanphan should have been clearer, it's actually code blocks containing text.

This is how it is on desktop view 

And on mobile - 

I'd love for the Giff Gaff block to appear next to block (but still right aligned) with the Agency credits in.

Like this mockup - 

Have tried variations of the codes above but can't figure it out.

Like I say, once I have this fixed I need to duplicate this page many time over to account for all the other peices of work, so any simple way of doing this would be appreciated.

If it is a case of id'ing the specific block then that's cool.

Many thanks in advance!

Or failing that, would it be easier to make the two credit code blocks align side by side to create this instead?

On 10/27/2021 at 7:33 PM, kinglear said:

Or failing that, would it be easier to make the two credit code blocks align side by side to create this instead?

 

It looks like you figured it out

@tuanphan I too am trying to make the footer text on my mobile site side by side. I am not haven't any luck. Would you please be able to assist me as well? Site: https://dahlia-beauty-bar.squarespace.com/ 

On 11/14/2021 at 9:43 AM, chikacreative said:

@tuanphan I too am trying to make the footer text on my mobile site side by side. I am not haven't any luck. Would you please be able to assist me as well? Site: https://dahlia-beauty-bar.squarespace.com/ 

What is access password?

Sorry the password is: friends 
@tuanphan

On 11/14/2021 at 9:43 AM, chikacreative said:

@tuanphan I too am trying to make the footer text on my mobile site side by side. I am not haven't any luck. Would you please be able to assist me as well? Site: https://dahlia-beauty-bar.squarespace.com/ 

Add to Design > Custom CSS

/* Mobile footer */
@media screen and (max-width:767px) {
div#page-section-618ec06bb6078011c1b7db4b .span-9>.row>.col:nth-child(-n+2) {
    width: 40% !important;
    float: left !important;
}
}