Guest Posted December 15, 2020 Share Posted December 15, 2020 (edited) Site URL: https://www.regeneration.vc/about Hi! On the mobile view of the Team page, I'm trying to create 2 columns of images and names and titles on mobile. In this example, the two images should be next to each other with each person's name underneath (kinda like it is on the desktop view) This is the webpage: https://www.regeneration.vc/about Here is a picture of what it looks like now and I want to be able to put the team members side by side on mobile, and then the advisory board side by side on mobile. All help appreciated... @tuanphan might you be able to help? Thank you!!! Edited December 15, 2020 by beccabrooker Link to comment
tuanphan Posted December 15, 2020 Share Posted December 15, 2020 You want, on mobile Image (left) - Title/Sub title (right) Is this right? 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
Guest Posted December 15, 2020 Share Posted December 15, 2020 (edited) Hi @tuanphan! I'm hoping for 2 images side by side with the respective texts under each person's name like this on mobile thank you!! Edited December 15, 2020 by beccabrooker Link to comment
tuanphan Posted December 20, 2020 Share Posted December 20, 2020 It looks like you solved with this code @media screen and (max-width: 640px) { #team-split-left .sqs-col-5 { float:left !important; width: 50% !important } } @media screen and (max-width: 640px) { #team-split-right .sqs-col-5 { float:left !important; width: 50% !important } } You can combine them to make code shorter @media screen and (max-width: 640px) { #team-split-left .sqs-col-5, #team-split-right .sqs-col-5 { float:left !important; width: 50% !important } } For anyone, #team-split-left is index id (You can see this in Index Item Settings > Advanced > Header). On Tablet, I see large white space between Luke/Destana - Advisory Board. Add this to Design > Custom CSS to solve this /* space betweens image - advisory board */ @media screen and (max-width:900px) and (min-width:641px) { section#team-split-left .Index-page-content { padding-bottom: 0; } section#team-split-right .Index-page-content { padding-top: 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment