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

Side-by-side image and text blocks on mobile


Question

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

desktopissue_1.png

mobileissue_1.png

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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

https://www.travisvoice.com/contact1

849428723_ScreenShot2020-08-19at2_03_31PM.thumb.png.d45fab9420790ffa30d7756a2149077b.png

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

1851878940_ScreenShot2020-08-19at2_04_30PM.thumb.png.5c38e57eb4e718b06a45d5c7c81cdde6.png

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

Screen Shot 2020-08-19 at 2.03.31 PM.png

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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...