mddiatta

Beautiful, thank you so much. You're a hero. 

Oh I see, I deleted all of the code related to the two columns in mobile view. 

Hello! 

Hope you're doing well. It's been a while, but I'd still love your help with this. 

I deleted the code as you suggested and it of course went back to one column in mobile view. http://www.myriamdiatta.com/projects 

Thank you!

Myriam 

Dear @tuanphan

I'm back to have a little of your help again if you're available. 

I'm working on the same site as in this thread: http://www.myriamdiatta.com/projects

In the grid of images and text on this page, I moved "thinking form" (top left) to the position it is now, and on mobile things have gotten skewed. On mobile I want the content to be a column of two. I did my best to read through the css you originally made for me, but i couldn't seem to work out what was this issue. 

Right now it looks like this: 

Here is the current code you made for me: 

/*TWO COLUMNS ON MOBILE VIEW PROJECTS PAGE*/////////

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2, div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2:nth-child(2n+1), div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2:nth-child(2n+1) {
    clear: left;
}
}
/* mobile 2 columns */
/* mobile 2 columns */
@media screen and (max-width:767px) {
div#page-5fc3c4c85147b14804a5f567 .span-8 .span-4 .span-2 {
    width: 50% !important;
    float: left !important;
}
  div#page-5fc3c4c85147b14804a5f567 .span-8 .span-4 .span-2:nth-child(2n+1) {
clear: left !important;
}  
}
 

Thank you so much.

I do, I wasn't able to work it out myself. Could you please help me with this? 

@tuanphan

happy new year 🙂

Yes! actually, it does work, not sure why I wasn't able to see it / make it work earlier. 

I do have a problem where just two blocks (four if you count the text blocks) aren't sitting side by side. I've screenshotted them here. 

On 12/21/2020 at 8:14 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2, div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2:nth-child(2n+1), div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2:nth-child(2n+1) {
    clear: left;
}
}

 

@tuanphan thank you so much, you're a star. Unfortunately it's not working. I tried changing the blocks in the code but no luck.

best, myriam

I have a similar question: How can I put blocks side by side on mobile only?

The one page on my site I would like to do this is on my "Projects" page. And would like this effect on mobile and ipad (i.e. two columns on mobile. I attached screenshot of what I'd like it to look like and included blocks so you can see its many blocks together.) Now on mobile it appears as one gigantic image and the text stacked. And I do not want to use the gallery blocks to achieve this because of their style. I'm happy with the site on desktop. 

I have about 30 blocks to organize on this "Projects" page but I am familiar enough with a bit of css / html that if someone can help me get started with just the code for 4 blocks (2 images, 2 text), I'm sure I can manage the rest. 

Better yet, I'd like to disable mobile view altogether (using Wells on 7.0).
Is it really not possible?  😭

Thanks very much for your help.