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

Mentor Theme Stagger Layout Stacking

Question

Hi guys!

I'm currently putting together a website for a client and am hitting a bit of a hiccup when laying out their team page. I want to stagger the content as follows:

Image | Text
Text | Image
Image | Text
etc

The layout is working exactly as desired on Desktop, but as most of you can imagine, it becomes problematic on mobile devices.

Is there a way, using the mentor theme, that I can inject some css code to reverse the stacking of each 2nd row, without throwing the rest of the website into disarray?

Really appreciate any assistance!

NB. The url for the page in question is www.jamesandbrothers.com.au/who-we-are

Screen Shot 2019-12-11 at 3.53.22 pm.png

IMG_4828.PNG

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* nathan */
div#block-yui_3_17_2_1_1575956026425_28740+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* luke */
div#block-yui_3_17_2_1_1575956026425_30707+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* naori */
div#block-yui_3_17_2_1_1575956026425_32685+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
36 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
/* nathan */
div#block-yui_3_17_2_1_1575956026425_28740+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* luke */
div#block-yui_3_17_2_1_1575956026425_30707+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* naori */
div#block-yui_3_17_2_1_1575956026425_32685+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Worked perfectly, thanks so much! Saved me a TON of time!!

 

Share this post


Link to post
  • 0

Hey there, I just stumbled across this brilliant post/question.

Firstly - thank you @tuanphan - you don't know how many times you saved me with your brilliant css help!!

 

I am facing the same problem as Luke, and am wondering how I can generate this: div#block-yui_3_17_2_1_1575956026425_28740+.row ; to be able to apply the css to my page. 

Can't wait to here from anyone that can assist me in this matter and THANK YOU so much in advance!!

Share this post


Link to post
  • 0
15 minutes ago, pebbles said:

Hey there, I just stumbled across this brilliant post/question.

Firstly - thank you @tuanphan - you don't know how many times you saved me with your brilliant css help!!

 

I am facing the same problem as Luke, and am wondering how I can generate this: div#block-yui_3_17_2_1_1575956026425_28740+.row ; to be able to apply the css to my page. 

Can't wait to here from anyone that can assist me in this matter and THANK YOU so much in advance!!

Can you share link to page in your quesstion?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
26 minutes ago, pebbles said:

There a few section I would need to adjust, but here as an example: on page Renovation https://yellow-chameleon-n8e9.squarespace.com/rnovation

I would like to have the small icons appearing on the mobile version as on desktop, so besides the text not under and zoomed in, as illustrated below:

 

 

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1590159851769_50076+.row .span-7 {
    width: 70% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1590159851769_50076+.row .span-3 {
    width: 30% !important;
    float: left !important;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

THIS IS MAGIC! Thank you so much @tuanphan! What a support; thank you!!

As I have some more cases as such, may I ask you how you came to the div# code?

As you may have seen I have many such "design elements" of big lettering as an image that I would need to adjust as well....would be great if you could please let me into your secret! ☺️

Example of these design elements, disrupting the experience on mobile 😞

 

1988386649_Bildschirmfoto2020-06-04um15_34_02.thumb.png.01d9bee77cbbb6ac5dd8a25a8df1d3ff.png

 

10000 roses to you, thank you!

Share this post


Link to post
  • 0

Oh, would have been too perfect 😕

Thank you for the plug-in! Do you happen to help me a bit further with the most essential adaptations for mobile? Would be 3 pictures...
(I feel weird asking, as I would understand if you see this going beyond a quick help via a forum)


I allow myself  to attach the 4 most essential I would also need to adapt for mobile. If you feel it exceeds the scope, don't worry — In any case, THANK YOU SO MUCH for having been such a great help already!! Really!

 

- The 'a' at https://yellow-chameleon-n8e9.squarespace.com/rnovation

- The 'Q' at https://yellow-chameleon-n8e9.squarespace.com/qui-sommesnous-

The 'L' at https://yellow-chameleon-n8e9.squarespace.com/privatisation and the picture that is below the text; with Picture aligned left and text right

 

Share this post


Link to post
  • 0
/* rnovation */
div#page-5e9d6b56554bbb3b8e32d545 .span-10 .row .span-4 {
    width: 40% !important;
    float: left !important;
}
div#page-5e9d6b56554bbb3b8e32d545 .span-10 .row .span-6 {
    width: 60% !important;
    float: left !important;
}
/* Qui */
div#page-5e9d7bc5aae6d36c0e3721f7>.row:nth-child(2) .span-10 .span-3 {
    width: 30% !important;
    float: left !important;
}
div#page-5e9d7bc5aae6d36c0e3721f7>.row:nth-child(2) .span-10 .span-7 {
    width: 70% !important;
    float: left !important;
}
/* Priva */
div#page-5e5658bd463d2210093568a2 .span-10>.row:nth-child(6) .span-3 {
    width: 30% !important;
    float: left !important;
}
div#page-5e5658bd463d2210093568a2 .span-10>.row:nth-child(6) .span-7 {
    width: 70% !important;
    float: left !important;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...