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

2 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;
}
}

 


Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

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

Create an account or sign in to comment

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


×
×
  • Create New...