Jump to content

Avenue: Change block order on mobile?

Recommended Posts

Hi @tuanphan

I have a similar issue. I can't seem to 

Site: covenantchambers.squarespace.com

Password: CovenantChambers

https://covenantchambers.squarespace.com/lee-ee-yang

If you look at the URL above, in mobile mode, its currently image - text1 - text2. I need it to be image - text2 - text1.

The "Contact, Education..." block needs to be below the "Lee Ee Yang, Managing Director..."  block.

 

Appreciate all the help! Thanks.

Regards,
Sherman

Link to comment
19 hours ago, Sherman said:

Hi @tuanphan

I have a similar issue. I can't seem to 

Site: covenantchambers.squarespace.com

Password: CovenantChambers

https://covenantchambers.squarespace.com/lee-ee-yang

If you look at the URL above, in mobile mode, its currently image - text1 - text2. I need it to be image - text2 - text1.

The "Contact, Education..." block needs to be below the "Lee Ee Yang, Managing Director..."  block.

 

Appreciate all the help! Thanks.

Regards,
Sherman

Add to Design > Custom CSS

/* Lee Ee Yang Mobile */
@media screen and (max-width:767px) {
div#page-section-6148c24479326d7dac32f914>.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-6148c24479326d7dac32f914 .image-block {
    display: none;
}
div#block-yui_3_17_2_1_1632158211775_11334:before {
    content: "";
    display: block;
    background-image: url(https://images.squarespace-cdn.com/content/v1/614400e30bc14e4658661983/1632158321635-APV2K65YL3LERVTJG4OV/CCportraits-Ee+yang.jpg?format=300w);
    background-size: cover;
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
}
}

 

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 9/25/2021 at 9:00 AM, tuanphan said:

Add to Design > Custom CSS

/* Lee Ee Yang Mobile */
@media screen and (max-width:767px) {
div#page-section-6148c24479326d7dac32f914>.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-6148c24479326d7dac32f914 .image-block {
    display: none;
}
div#block-yui_3_17_2_1_1632158211775_11334:before {
    content: "";
    display: block;
    background-image: url(https://images.squarespace-cdn.com/content/v1/614400e30bc14e4658661983/1632158321635-APV2K65YL3LERVTJG4OV/CCportraits-Ee+yang.jpg?format=300w);
    background-size: cover;
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
}
}

 

Hey @tuanphan,

thanks for this. 

I have one more issue for the same website - on the 'Firm' page, I would like to change the title size on mobile of the 'Our Team' 'List' block on squarespace. It is currently too small. Have attached an image for your reference.

Appreciate the help! 

Regards,
Sherman

Screenshot 2021-09-27 at 10.55.45 PM.png

Link to comment
On 9/27/2021 at 9:58 PM, Sherman said:

Hey @tuanphan,

thanks for this. 

I have one more issue for the same website - on the 'Firm' page, I would like to change the title size on mobile of the 'Our Team' 'List' block on squarespace. It is currently too small. Have attached an image for your reference.

Appreciate the help! 

Regards,
Sherman

Screenshot 2021-09-27 at 10.55.45 PM.png

Add to Design > Custom CSS

/* Mobile-Firm page-Our Team text */
@media screen and (max-width:767px) {
div#\36 14760f7c00e4b7f57174090 p {
    font-size: 50px !important;
}
}

 

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 months later...

Hi @tuanphan / @creedon I wonder if you could help me, you seem to be the experts on this issue.

I'm using the Avenue template.

The videos on my website - https://www.david-wright.com/ - are displayed in order of preference on desktop; going left to right, two columns per row:

Video 1 - Video 2
Video 3 - Video 4
Video 5 - Video 6
etc....

On mobile however, the videos are stacked in a single column (which I like), but the order is rearranged to:

Video 1
Video 3
Video 5
Video 2
Video 4
Video 6

Do you know of a way to keep the desktop order when viewing on mobiles?

Appreciate any help you can offer 🙂

Thanks
David

Link to comment
On 12/11/2021 at 3:47 AM, dw1080 said:

Do you know of a way to keep the desktop order when viewing on mobiles?

Here is the issue. You have created two columns of blocks. So when the screen is below a certain width the column on the right slides down underneath the left column.

The prevent this issue I like to use the line block trick. Place two blocks in a row, then place a line block below those blocks.

246714998_ScreenShot2021-12-11at8_59_01AM.thumb.png.9755f6cdea1967a3b0d2f44b22c1b710.png

Once everything is in place you can remove the line block.

You have now forced the blocks to be rows of two instead of two columns.

When the screen gets narrow it works as you want.

Let us know how it goes. Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks for the reply @creedon

So that solution worked great but has introduced a new problem.

I forgot to mention that I have a text block with the title just below each video. So the original layout was actually:

Video 1 - Video 2
Text 1 - Text 2
Video 3 - Video 4
Text 3 - Text 4

Now using your solution it displays on mobile like this:

Video 1
Video 2
Text 1
Text 2

But I'd like it to display:

Video 1 
Text 1
Video 2
Text 2

Is that possible?
Thanks!
David

Link to comment

@dw1080

When are you adding titles in don't use line blocks to create separate rows.

72363633_ScreenShot2021-12-12at11_40_35AM.thumb.png.73bdc9fdbfc3b9615e37c6b14582d8fa.png

Recall the previous behaviour I described. SS wants to group blocks that are vertically inline with each other into columns. So yellow pickled stuff image and Title 1 become one column. Red pickled stuff image and Title 2 become one column.

When screen gets narrows the right column slides down under the left column.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
19 minutes ago, dw1080 said:

I've managed to solve the issue by using video block captions rather than using separate text blocks underneath the video.

That works too! 🙂

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi @creedon, unfortunately using captions hasn't worked out as I want to use multiple fonts and apparently this isn't possible with captions.

So going back to your solution, I still can't get the video and it's relevant title block to group together as you described.

This is how I'm inserting lines:

Video 1     Video 2

Text 1        Text 2

Line ----------------

Video 3    Video 4

Text 3       Text 4

Line --------------

 

On mobile it still ends up displaying like this:

Video 1
Video 2
Text 1
Text 2
Video 3
Video 4

Text 3 
Text 4

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.