cstone Posted July 12, 2022 Share Posted July 12, 2022 Site URL: https://www.chanellstone.com/ Hello, I am running into an issue where my images display stacked rather than as a side by side gallery view on the mobile web view. I am using the Wells template. I would like all images in every navigation section to display horizontally (with ability to toggle through with arrows). Additionally, how do I resize the images for mobile view? Can someone please help me with this? Thank you! Link to comment
tuanphan Posted July 13, 2022 Share Posted July 13, 2022 Hi. Which page are you referring to? 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
cstone Posted July 14, 2022 Author Share Posted July 14, 2022 On 7/13/2022 at 7:46 AM, tuanphan said: Hi. Which page are you referring to? The pages "Natura Negra", "Works in Progress" and "Exhibitions" -- these are the pages made as galleries. However, on the mobile view the images are stacked vertically rather than side by side (horizontally). I want these images to scroll side by side (horizontal). https://www.chanellstone.com/natura-negra https://www.chanellstone.com/exhibition https://www.chanellstone.com/work-in-progress Link to comment
tuanphan Posted July 15, 2022 Share Posted July 15, 2022 If make side by side, it won't work. Add to Design > Custom CSS @media screen and (max-width:640px) { div#slideshow { display: grid !important; grid-template-columns: repeat(2,1fr); grid-gap: 20px 20px; } } 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
LonniWong Posted September 13, 2022 Share Posted September 13, 2022 hello @tuanphan i have tried using your code display: grid !important; but no wonder, it didnt work with me. i have learned this little code here and it works: /* shop image size */ @media only screen and (max-width:640px) {section[data-section-id="62ab38dc3d5b44468b10ab23"] {width:60%; margin:auto; }} how do i make my articles in shop appear side by side please? (2 articles in a row) if i go under 50% the categories will be cut and not centered neither. Any help appreciated! my link is https://www.lonniwong.com/shop Link to comment
tuanphan Posted September 17, 2022 Share Posted September 17, 2022 On 9/13/2022 at 3:19 PM, LonniWong said: hello @tuanphan i have tried using your code display: grid !important; but no wonder, it didnt work with me. i have learned this little code here and it works: /* shop image size */ @media only screen and (max-width:640px) {section[data-section-id="62ab38dc3d5b44468b10ab23"] {width:60%; margin:auto; }} how do i make my articles in shop appear side by side please? (2 articles in a row) if i go under 50% the categories will be cut and not centered neither. Any help appreciated! my link is https://www.lonniwong.com/shop Do not add to Custom CSS Add this code to Settings > Advanced > Code Injection > Header <style> @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10px; } } </style> 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
LonniWong Posted September 18, 2022 Share Posted September 18, 2022 16 hours ago, tuanphan said: Do not add to Custom CSS Add this code to Settings > Advanced > Code Injection > Header <style> @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10px; } } </style> yay! thank you so much @tuanphan! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment