Jump to content

Make my image blocks into multiple rows on mobile

Recommended Posts

Site URL: https://tarkovgear.com/

Hello everyone, 

For any of my pages, (lets use https://tarkovgear.com/headwear as an example since it is fairly long anyways and mobile makes it even longer) the image links look fine on desktop, but on both tablet and mobile it just becomes a long line to scroll through. The current CSS I have is shown below which is just to shrink the image blocks when on mobile.
I have tried using " float: left; " and making the image sized even smaller with the hopes that it would bring another row up to the right. I don't know if there is a specific way to add another row or something and would appreciate any help

 

i dunno.png

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

17 hours ago, beaches55 said:

Hi tuan, yea I am wanting to make 2 items on a row for mobile view.

Hi. Try adding to Design > Custom CSS

/* Headwear on mobile */
@media screen and (max-width:767px) {
div#page-section-610be0037197862c228c870e .span-4 .image-block, div#page-section-610be21eb86d6245474eaade .span-4 .image-block {
    width: 50%;
    float: left;
    clear: none;
    padding: 0;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/18/2021 at 7:43 PM, beaches55 said:

That worked great! Is there any way for me to apply that site-wide or will I just have to add page-sections for every page?

Each page has a different code structure so need a different code. You can share link to all pages, we can help!

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/22/2021 at 10:33 PM, beaches55 said:

there is quite a few pages and i would feel bad. If it would be easier you can explain how to search for the code structure, otherwise i can post the 25 or so pages. Thankyou again for all your help so far

Hi. No way to explain. You will need to know HTML/CSS to solve these.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.