tuanphan Posted September 11, 2021 Share Posted September 11, 2021 @shandyyym Add to Design > Custom CSS /* Mobile Footer */ @media screen and (max-width:640px) { /* social icons */ div#page-section-61285086fa48462a6007d00b .span-5 .span-1 { width: 20% !Important; float: left !important; } div#page-section-61285086fa48462a6007d00b .span-5 .span-1 .image-block { width: 70%; } /* center text */ div#block-yui_3_17_2_1_1631292504329_257092 ~ div * { text-align: center; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
shandyyym Posted September 11, 2021 Share Posted September 11, 2021 That worked!!! Thank you so much @tuanphan Also, can you help me with the menu section in mobile? I'm trying to reduce the font size of the button here: Thank you so much! 6 hours ago, tuanphan said: @shandyyym Add to Design > Custom CSS /* Mobile Footer */ @media screen and (max-width:640px) { /* social icons */ div#page-section-61285086fa48462a6007d00b .span-5 .span-1 { width: 20% !Important; float: left !important; } div#page-section-61285086fa48462a6007d00b .span-5 .span-1 .image-block { width: 70%; } /* center text */ div#block-yui_3_17_2_1_1631292504329_257092 ~ div * { text-align: center; } } Link to comment
tuanphan Posted September 12, 2021 Share Posted September 12, 2021 11 hours ago, shandyyym said: That worked!!! Thank you so much @tuanphan Also, can you help me with the menu section in mobile? I'm trying to reduce the font size of the button here: Thank you so much! Add to Design > Custom CSS /* Mobile menu button */ .header-menu-cta a { font-size: 10px !important; } Do you want to move menu/button up higher? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
shandyyym Posted September 14, 2021 Share Posted September 14, 2021 On 9/12/2021 at 4:13 PM, tuanphan said: Add to Design > Custom CSS /* Mobile menu button */ .header-menu-cta a { font-size: 10px !important; } Do you want to move menu/button up higher? Yes, if it's okay. Thank you 🙂 @tuanphan Link to comment
shandyyym Posted September 14, 2021 Share Posted September 14, 2021 (edited) @tuanphan Also, is there a way for these pictures to "NOT" somehow hanging? These photos keep on floating as soon as my screen resizes from width 945px to smaller widths. I have similar pictures like these across the web pages 😞 1. homepage https://www.coachcourtney.net/ 2. About me https://www.coachcourtney.net/about 3. Training packages https://www.coachcourtney.net/trainingpackages I also think that the padding on top is not responsive. I'm not sure why. I use the following code for the desktop previously: //Home PAGE// //CC Picture at Home PAGE// div#block-yui_3_17_2_1_1631304561541_3905 { padding-bottom: 0; } [data-section-id="6128352549b74866b4b70d81"] { min-height: 10vh !important; } [data-section-id="6128352549b74866b4b70d81"] .content-wrapper { padding-top: 30px !important; padding-bottom: 0px !important; } //removing padding bottom at about me picture// div#block-yui_3_17_2_1_1631167739251_2488 { padding-bottom: 0; } [data-section-id="6139a4c760236d737ef81c08"] { min-height: 10vh !important; } [data-section-id="6139a4c760236d737ef81c08"] .content-wrapper { padding-top: 80px !important; padding-bottom: 0px !important; } //removing padding bottom at Training Packages Page// //CC Picture at Training Packages Page// div#block-yui_3_17_2_1_1631303218959_4742 { padding-bottom: 0; } //STRENGTH and SOUL IMAGE LEFT// div#block-yui_3_17_2_1_1631140439839_4960 { padding-bottom: 0; padding-top: 0px; } [data-section-id="61393a6b321ef9720209c260"] { min-height: 10vh !important; } [data-section-id="61393a6b321ef9720209c260"] .content-wrapper { padding-top: 30px !important; padding-bottom: 0px !important; } //removing padding bottom at TRIBE Retreat Page// //CC Picture at TRIBE Retreat Page// div#block-yui_3_17_2_1_1631220058643_14982 { padding-bottom: 0; } //ABOUT THE RETREAT at TRIBE Retreat Page// div#block-yui_3_17_2_1_1631220058643_13789 { padding-bottom: 0; padding-top: 40px; } [data-section-id="6139abe393764a70eda3bbe8"] { min-height: 10vh !important; } [data-section-id="6139abe393764a70eda3bbe8"] .content-wrapper { padding-top: 20px !important; padding-bottom: 0px !important; } Also, as my screen reaches somewhere from 1205px width, there's a white space on the right side of the screen. It only disappears after the menu burger icon becomes visible. So sorry for bombarding you with these problems.. I'm not really good at this. Thank you so much. Edited September 14, 2021 by shandyyym Added some texts Link to comment
tuanphan Posted September 17, 2021 Share Posted September 17, 2021 On 9/15/2021 at 5:06 AM, shandyyym said: @tuanphan Also, is there a way for these pictures to "NOT" somehow hanging? These photos keep on floating as soon as my screen resizes from width 945px to smaller widths. I have similar pictures like these across the web pages 😞 1. homepage https://www.coachcourtney.net/ 2. About me https://www.coachcourtney.net/about 3. Training packages https://www.coachcourtney.net/trainingpackages I also think that the padding on top is not responsive. I'm not sure why. I use the following code for the desktop previously: //Home PAGE// //CC Picture at Home PAGE// div#block-yui_3_17_2_1_1631304561541_3905 { padding-bottom: 0; } [data-section-id="6128352549b74866b4b70d81"] { min-height: 10vh !important; } [data-section-id="6128352549b74866b4b70d81"] .content-wrapper { padding-top: 30px !important; padding-bottom: 0px !important; } //removing padding bottom at about me picture// div#block-yui_3_17_2_1_1631167739251_2488 { padding-bottom: 0; } [data-section-id="6139a4c760236d737ef81c08"] { min-height: 10vh !important; } [data-section-id="6139a4c760236d737ef81c08"] .content-wrapper { padding-top: 80px !important; padding-bottom: 0px !important; } //removing padding bottom at Training Packages Page// //CC Picture at Training Packages Page// div#block-yui_3_17_2_1_1631303218959_4742 { padding-bottom: 0; } //STRENGTH and SOUL IMAGE LEFT// div#block-yui_3_17_2_1_1631140439839_4960 { padding-bottom: 0; padding-top: 0px; } [data-section-id="61393a6b321ef9720209c260"] { min-height: 10vh !important; } [data-section-id="61393a6b321ef9720209c260"] .content-wrapper { padding-top: 30px !important; padding-bottom: 0px !important; } //removing padding bottom at TRIBE Retreat Page// //CC Picture at TRIBE Retreat Page// div#block-yui_3_17_2_1_1631220058643_14982 { padding-bottom: 0; } //ABOUT THE RETREAT at TRIBE Retreat Page// div#block-yui_3_17_2_1_1631220058643_13789 { padding-bottom: 0; padding-top: 40px; } [data-section-id="6139abe393764a70eda3bbe8"] { min-height: 10vh !important; } [data-section-id="6139abe393764a70eda3bbe8"] .content-wrapper { padding-top: 20px !important; padding-bottom: 0px !important; } Also, as my screen reaches somewhere from 1205px width, there's a white space on the right side of the screen. It only disappears after the menu burger icon becomes visible. So sorry for bombarding you with these problems.. I'm not really good at this. Thank you so much. Hi, #1. You mean make image touch border bottom of section? #2. Remove white bar on right of screen on all devices? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
shandyyym Posted September 22, 2021 Share Posted September 22, 2021 Yes please @tuanphan On 9/17/2021 at 10:45 AM, tuanphan said: Hi, #1. You mean make image touch border bottom of section? #2. Remove white bar on right of screen on all devices? Link to comment
tuanphan Posted September 26, 2021 Share Posted September 26, 2021 On 9/23/2021 at 12:11 AM, shandyyym said: Yes please @tuanphan Hi, It looks like you solved on desktop Add this code to Design > Custom CSS /* Mobile */ @media screen and (max-width:640px) { /* Fix white bar on right of screen */ html, body { overflow-x: hidden; } /* homepage image */ div#block-yui_3_17_2_1_1631304561541_3905 { padding-bottom: 0px !important; } /* about image */ div#block-yui_3_17_2_1_1631167739251_2488 { padding-bottom: 0px !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
shandyyym Posted October 25, 2021 Share Posted October 25, 2021 Thank you @tuanphan You're the best! Link to comment
shandyyym Posted October 26, 2021 Share Posted October 26, 2021 Hi @tuanphan, I tried using the code before for the footer icons from the comments On 9/11/2021 at 9:36 PM, tuanphan said: @shandyyym Add to Design > Custom CSS /* Mobile Footer */ @media screen and (max-width:640px) { /* social icons */ div#page-section-61285086fa48462a6007d00b .span-5 .span-1 { width: 20% !Important; float: left !important; } div#page-section-61285086fa48462a6007d00b .span-5 .span-1 .image-block { width: 70%; } /* center text */ div#block-yui_3_17_2_1_1631292504329_257092 ~ div * { text-align: center; } } on this section from this page here: https://www.dwlcflorida.com/program section[data-section-id="60dd2a322d03be012eef0ff3"] and this section: section[data-section-id="60dd2c4d82999b17efdb6eec"] but it's not actually working 😞 Please help. Link to comment
tuanphan Posted October 27, 2021 Share Posted October 27, 2021 On 10/26/2021 at 7:04 AM, shandyyym said: Hi @tuanphan, I tried using the code before for the footer icons from the comments on this section from this page here: https://www.dwlcflorida.com/program section[data-section-id="60dd2a322d03be012eef0ff3"] and this section: section[data-section-id="60dd2c4d82999b17efdb6eec"] but it's not actually working 😞 Please help. You mean change to 2 icons/row on mobile? https://www.dwlcflorida.com/program Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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