duffk Posted July 11, 2021 Share Posted July 11, 2021 (edited) Site URL: https://dcoinc.org The top image is using the poster design. I want to move the content to the left so that the words do not overlap the words in the image. I can change the content width and left align text but how can I move all of the content to the left and not centered on the image? It is the top Life Choices image. I would also like to make this image full width if possible. Edited July 12, 2021 by duffk Link to comment
duffk Posted July 12, 2021 Author Share Posted July 12, 2021 Ok I found this css and it works great on desktop and iPad but not for mobile devices. Help me adjust it for phones please. .design-layout-poster figcaption.image-card-wrapper { justify-content: flex-start !important; padding-left: 95px; } Link to comment
tuanphan Posted July 13, 2021 Share Posted July 13, 2021 13 hours ago, duffk said: Ok I found this css and it works great on desktop and iPad but not for mobile devices. Help me adjust it for phones please. .design-layout-poster figcaption.image-card-wrapper { justify-content: flex-start !important; padding-left: 95px; } Don't remove any code in your current code. Add this to Design > Custom CSS > Then save & reload the site /* Mobile Posters */ @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1625867571613_2371 .image-inset { padding-bottom: 100% !Important; /* increase poster height to prevent text overflow */ } div#block-yui_3_17_2_1_1625867571613_2371 figcaption.image-card-wrapper { padding-left: 30px; } } 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
tuanphan Posted July 19, 2021 Share Posted July 19, 2021 Hi. Also do you want to fix these? Site URL – https://www.decisionschoicesandoptions.com/ 1. (Desktop – parent tool kit) The sizes of the buttons are not equal, not aligned, do not look good. https://www.decisionschoicesandoptions.com/sexual-education-resources-1 2. (Desktop/Tablet – Header) Text is partially cut. https://www.decisionschoicesandoptions.com/ 3. (Desktop – Event) Text is skewed to the left. https://www.decisionschoicesandoptions.com/pray-4-students-tn 4. (Mobile – Menu) Can’t see menu items. https://www.decisionschoicesandoptions.com/ 5. (Tablet – Header) Menu is cut into 2 lines. https://www.decisionschoicesandoptions.com/ 6. (Mobile – Contact us) Reduce space? https://www.decisionschoicesandoptions.com/contact 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