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

Code Blocks Mobile


Lexa

Question

Site URL: http://ariix.com.mx/nutrifii

Hey guys, I am working on a site that has some icons (as code blocks) and I am having trouble when the display is switched to mobile. 

In desktop the code blocks appear on the same row, however as we know in mobile everything is stacked. I have tried several CSS codes without avail. I can't seem to find a way to make the images appear on the same row when on mobile. 

On the attachments you will be able to see how the display is on desktop and how it stacks them and messes up the row on mobile. 

Thanks in advance!

Screen Shot 2020-10-17 at 10.57.48 AM.png

Screen Shot 2020-10-17 at 10.57.59 AM.png

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

With current layout, you can't place 3 images/row if you want image 1 + 2/row, image 3 in new row (& center), we can give the code

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1597357570172_21037+.row>.span-2 { width: 50% !important; float: left !important; }

Posted Images

5 answers to this question

Recommended Posts

  • 1

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1597357570172_21037+.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
}

 

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

With current layout, you can't place 3 images/row

if you want image 1 + 2/row, image 3 in new row (& center), we can give the code

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
1 hour ago, tuanphan said:

With current layout, you can't place 3 images/row

if you want image 1 + 2/row, image 3 in new row (& center), we can give the code

This would be great @tuanphan I would greatly appreciate it! I just want to mobile to look more user friendly, and 2 images per row (and then the other code block below) is perfect. 🙂 

Link to post
  • 0
13 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1597357570172_21037+.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
}

 

Worked perfectly. Thank you!!!

Link to post
  • 0

Hello @tuanphan sorry to bother you again, hope you can help me out again, I would greatly appreciate it!

I have several icons on the webpage: https://ariix.com.mx/nutrifii which didn't work with the code, all others did work. For example the blue and green icons (attachment) don't show up as two columns on mobile. I am targeting the spacer block ID which is on top of the icons for the code, is that the problem? 

And the last question, there is another page with icons, https://ariix.com.mx/slenderiiz on which I also applied the code above but the icons still stack on mobile, I think I am targeting the wrong Block ID.

Any tips or help is appreciated!

Screen Shot 2020-10-22 at 8.38.42 AM.png

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