winabean7 Posted September 2, 2020 Share Posted September 2, 2020 Site URL: http://www.riverlandcollective.com I have multiple pages with text blocks on one side and an image on another, and I want the blocks to be vertically aligned center. I was able to make it work using "display: flex; align-items: center;" on some pages but not others, and I have no idea why. Here's an example of a page where it's working (see the first section): https://www.riverlandcollective.com/about And an example of a page where it's not (see the first section): https://www.riverlandcollective.com/work What am I doing wrong? 😭 Link to comment
tuanphan Posted September 2, 2020 Share Posted September 2, 2020 Use this CSS for Work page div#page-section-5f4d83e0a82f1a123a9bebe2>.row { display: flex; align-items: center; } StoriesAroundTheSun, Centive and PEARLERwork 3 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
winabean7 Posted September 2, 2020 Author Share Posted September 2, 2020 Hey @tuanphan, thank you so much for your help! I've seen you a lot in these forums when I was looking for a solution, you're a hero. Really appreciate all that you do 🙂 raeroshow, leighb and raydmurphy 3 Link to comment
Uggel Posted December 4, 2020 Share Posted December 4, 2020 On 9/2/2020 at 11:43 AM, tuanphan said: Use this CSS for Work page div#page-section-5f4d83e0a82f1a123a9bebe2>.row { display: flex; align-items: center; } This works fine on desktop, but on mobile devices the image (or movie in my case) disapears. Any ideas? Link to comment
tuanphan Posted December 6, 2020 Share Posted December 6, 2020 On 12/4/2020 at 9:32 PM, Uggel said: This works fine on desktop, but on mobile devices the image (or movie in my case) disapears. Any ideas? Can you share page url? We can check easier 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
Uggel Posted December 14, 2020 Share Posted December 14, 2020 https://www.getvibes.se/ The block "It’s such a good vibration" a bit down. The youtube video doesn't show when I try to center the text. Link to comment
tuanphan Posted December 15, 2020 Share Posted December 15, 2020 22 hours ago, Uggel said: https://www.getvibes.se/ The block "It’s such a good vibration" a bit down. The youtube video doesn't show when I try to center the text. I see video here. Did you solve? I see footer doesn't look good on tablet. Do you want to fix this? 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
Uggel Posted February 10, 2021 Share Posted February 10, 2021 Hi! Sorry for the late reply, yes I solved the video thing. About the tablet footer, absolutely! Do you have a solution? Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/10/2021 at 3:54 PM, Uggel said: Hi! Sorry for the late reply, yes I solved the video thing. About the tablet footer, absolutely! Do you have a solution? Add to Design > Custom CSS /* Tablet footer */ @media screen and (max-width:991px) and (min-width:768px) { div#page-section-5f758e421ea34d1aeb060268>.row>.col { width: 100%; } div#page-section-5f758e421ea34d1aeb060268>.row>.span-1 { display: none; } div#block-yui_3_17_2_1_1606223524464_6673 { display: none; } div#block-a54b0002edc5dd4a938a p { display: flex; justify-content: space-between; flex-wrap: nowrap; } } This will move links to new row & make footer navigations horizontal align Uggel 1 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
ThamesCanoe Posted March 9, 2021 Share Posted March 9, 2021 Hi, I'm having a similar issue (I'm unable to vertically align text tot he center). I'd like the text on the right to be vertically cantered to the image on the left: https://cuboid-endive-achr.squarespace.com/ I tried copying the code snippet above, but I'm not sure if I've got the correct div ID for the CSS. Any advice gratefully received! Thanks :) Link to comment
tuanphan Posted March 20, 2021 Share Posted March 20, 2021 On 3/9/2021 at 5:48 PM, ThamesCanoe said: Hi, I'm having a similar issue (I'm unable to vertically align text tot he center). I'd like the text on the right to be vertically cantered to the image on the left: https://cuboid-endive-achr.squarespace.com/ I tried copying the code snippet above, but I'm not sure if I've got the correct div ID for the CSS. Any advice gratefully received! Thanks :) Hi. Your layout. This is not possible. If you still need help, can you duplicate the site & add me as a contributor on the duplicated site? I will try testing some code. 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
Mevn Posted May 5, 2021 Share Posted May 5, 2021 (edited) Salut ! J'essaye d'utiliser le même code pour centrer le texte sur ma page d'accueil mais il ne s'adapte pas. Je voudrais centrer verticalement le texte pour "livraison gratuite sur nantes" et en dessous de l'autre section avec du texte. URL du site : https://ww.arabicafes.com mot de passe: arabicafestest Merci pour ton aide 🙂 Edited May 5, 2021 by Mevn Link to comment
tuanphan Posted May 7, 2021 Share Posted May 7, 2021 On 5/6/2021 at 4:31 AM, Mevn said: Salut ! J'essaye d'utiliser le même code pour centrer le texte sur ma page d'accueil mais il ne s'adapte pas. Je voudrais centrer verticalement le texte pour "livraison gratuite sur nantes" et en dessous de l'autre section avec du texte. URL du site : https://ww.arabicafes.com mot de passe: arabicafestest Merci pour ton aide 🙂 L'URL n'existe pas. Pouvez-vous vérifier à nouveau? 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
Mevn Posted May 8, 2021 Share Posted May 8, 2021 (edited) Sorry, the URL is this: https://arabicafes.com/ with the password: arabicafestest Thank's Edited May 8, 2021 by Mevn Link to comment
tuanphan Posted May 9, 2021 Share Posted May 9, 2021 On 5/8/2021 at 4:10 PM, Mevn said: Sorry, the URL is this: https://arabicafes.com/ with the password: arabicafestest Thank's livraison gratuite sur nantes I don't see. Can you take a screenshot? 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
Mevn Posted May 9, 2021 Share Posted May 9, 2021 I'm talking about the top and bottom section of the screen shot here. "livraison gratuite sur nantes" and "Valoriser le travail des producteurs Soutenir les micro-torréfacteurs Partager les plus beaux cafés" Thank's Link to comment
tuanphan Posted May 11, 2021 Share Posted May 11, 2021 On 5/10/2021 at 12:06 AM, Mevn said: I'm talking about the top and bottom section of the screen shot here. "livraison gratuite sur nantes" and "Valoriser le travail des producteurs Soutenir les micro-torréfacteurs Partager les plus beaux cafés" Thank's Actually, I think they are fine. Did you solve the problem? 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
Mevn Posted May 12, 2021 Share Posted May 12, 2021 Actually, I am a bit of a perfectionist. There is just a little shift, I find the text is not exactly centered in the section. Link to comment
Mevn Posted May 12, 2021 Share Posted May 12, 2021 URL : www.arabicafes.com password: arabicafestest An other question, i have a problem with the different size on screen. Particularly with big size. Like you can see on the uploaded image, there are a difference between the 2 images. The image on the left it's on my normal screen (mac computer) and the disposition that i want, and the second image it's on big screen of my brother computer. I see just above on your screenshot of my website that the layout has also changed.. Can you help me to fixe this problem? 🙏 Thank you Link to comment
tuanphan Posted May 14, 2021 Share Posted May 14, 2021 On 5/12/2021 at 2:55 PM, Mevn said: URL : www.arabicafes.com password: arabicafestest An other question, i have a problem with the different size on screen. Particularly with big size. Like you can see on the uploaded image, there are a difference between the 2 images. The image on the left it's on my normal screen (mac computer) and the disposition that i want, and the second image it's on big screen of my brother computer. I see just above on your screenshot of my website that the layout has also changed.. Can you help me to fixe this problem? 🙏 Thank you You mean Fix text overlap image Increase 3 text with (under image) Center vertical text/image on right box 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
Mevn Posted May 14, 2021 Share Posted May 14, 2021 Yes exactly. And I would also like the main menu to be on one line and not on 2 lines, as can be seen in the second image. I didn't find how to do that.. Link to comment
HEYTK Posted October 7, 2021 Share Posted October 7, 2021 I am having the same issue: when I vertically center the text in a section, my images disappear on mobilehttps://www.get-equip.ca/ Link to comment
tuanphan Posted October 9, 2021 Share Posted October 9, 2021 On 10/7/2021 at 7:41 AM, HEYTK said: I am having the same issue: when I vertically center the text in a section, my images disappear on mobilehttps://www.get-equip.ca/ Hi, What is password? 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
Anele0610 Posted October 29, 2021 Share Posted October 29, 2021 On 9/2/2020 at 4:43 AM, tuanphan said: Use this CSS for Work page div#page-section-5f4d83e0a82f1a123a9bebe2>.row { display: flex; align-items: center; } Hey @tuanphan! So this code works perfectly just for one line of the section, but can it work on all lines? I'm trying to imitate a table without coding one here.. https://fairwaystoleadership.squarespace.com/league-table 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