Force a Block onto a separate line in Tablet View

Site URL: https://www.jeanettepididesign.com/our-studio

Hello! On my site, I have a slideshow gallery next to text box. This looks good at desktop size, however, at tablet size, the gallery is small and the text is crammed next to it. Is there a way to force the text box to sit below the gallery (like it does on mobile) at tablet size?

Attached are some screenshots.

Thanks!

can you share link to page in screenshot? I don't see them on homepage

Ah, yes! Sorry. https://www.jeanettepididesign.com/our-studio

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-59148771db29d64eb7b4c9c3>.row:nth-child(1)>.col {
    width: 100%;
}

}

27 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-59148771db29d64eb7b4c9c3>.row:nth-child(1)>.col {
    width: 100%;
}

}

 

Thank you! This worked perfectly. If I didn't want the now stacked gallery and text box to take up the full width of the window, would I be able to make it narrower?

you can change 100% to 70%,..

and add margin: 0 auto; to center them.