Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Avenue: Change block order on mobile?


cakalak

Question

Hi!

I'm creating a page in the Avenue template. When viewed on a desktop there is an image on the left, and text to the right (see "M", attached).

When viewed on a mobile device, the image comes first, with the text below (see "D", attached).

I'd like to swap the positions of the 2 blocks on the mobile device. That is, I'd like the text first, followed by the image below.

How can I do this?

Thank you!

 

 

D.png

M.png

Edited by cakalak
Wrong images attached
Link to comment

Recommended Posts

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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