Portfolio

Hi there, I want to create 2 columns in a portfolio section on desktop but 1 on mobile, every time I change on a device view it changes the other, is there any way around this?

Hi,

You can do 2 columns on desktop, then share site url, we can give you code to make it 1 column on mobile

You can also try this code to Website > Website Tools > Custom CSS first

@media screen and (max-width:767px) {
	#gridThumbs {
		display: grid !important;
		grid-template-columns: repeat(1,1fr) !important;
}
}

Thanks, not sure where to insert the code, also not being a developer not sure I want to mess too much with that. Just looking to change the columns on desktop to allow more variation in the portfolio, and it not impact on mobile, mobile always be one image on top of each other.

(remember to save a copy of all CSS code somewhere, before edit anything, just for backup)

Access CSS here

Thanks, I can find the menu, but where is it pasted in the Custom CSS list, is what I am unsure of.

Paste to top of CSS box, or under Line 36

(remember to save a copy of all code somewhere, before edit anything, just for backup)

Hi there, I have added the code in at the top of the CSS panel as suggested, but this not not seem to translate to 1 column on mobile. The site URL is https://www.brandspired.co.nz/

Thanks,

On 3/8/2024 at 3:20 PM, tuanphan said:

Hi,

You can do 2 columns on desktop, then share site url, we can give you code to make it 1 column on mobile

You can also try this code to Website > Website Tools > Custom CSS first

@media screen and (max-width:767px) {
	#gridThumbs {
		display: grid !important;
		grid-template-columns: repeat(1,1fr) !important;
}
}

 

That code will make 1 columns on mobile, if you want 2 columns, use this code instead

@media screen and (max-width:767px) {
	#gridThumbs {
		display: grid !important;
		grid-template-columns: repeat(2,1fr) !important;
}
}