Side-by-side image and text blocks on mobile

Site URL: https://www.joeschlangen.com/draft/brian-w5fwj

Hello! I want to add small icons next to text blocks that correspond with the content of the text block. This works fine when I am viewing on my desktop (see attached image "desktopissue_1.png"), but when I switch to mobile view, it stacks the images (see attached image "mobileissue_1.png) and looks a little silly.

Is there any way to make it so that certain images like the one pictured in my attachments do not stack when switching to mobile view, and instead retain the formatting that I made in the desktop version? Any help would be much appreciated!

Thanks in advance,

Joe

Hi,

Add to Home > Design > Custom CSS

/* Brian page */
@media screen and (max-width:640px) {
/* blue cap image */
div#block-98d90d451f97db6f38b0+.row .span-2 {
    width: 30% !important;
	float: left;
}
div#block-98d90d451f97db6f38b0+.row .span-10 {
    width: 70% !important;
    float: left !important;
}
}

If the code works, please let me know, I will check code for other items.

@tuanphan for some reason the code will not work for my site

https://www.travisvoice.com/contact1

this is how it appears on desktop, but it looks like this on mobile

here is the code I pasted in with the respective block titles

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1595252570804_29010+.row .span-2 {
    width: 30% !important;
    float: left;
}
div#block-yui_3_17_2_1_1595252570804_29299+.row .span-10 {
    width: 70% !important;
    float: left !important;
}
}

16 hours ago, agmantia said:

@tuanphan for some reason the code will not work for my site

https://www.travisvoice.com/contact1

this is how it ppears on desktop, but it looks like this on mobil

here is the code I pasted in with the respective block titles

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1595252570804_29010+.row .span-2 {
    width: 30% !important;
    float: left;
}
div#block-yui_3_17_2_1_1595252570804_29299+.row .span-10 {
    width: 70% !important;
    float: left !important;
}
}

 

Each site needs different code structure.

You need to adjust layout a bit, then use CSS to achieve what you want.