Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Change block sequence for mobile view


Recommended Posts

@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.

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

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:

image.png.85c945e1ac3b59cf5a5053c898887ee0.png

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
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:

image.png.85c945e1ac3b59cf5a5053c898887ee0.png

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.

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

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/

image.thumb.png.7885824868295fc223ab9ed902d655e4.png

image.png

image.thumb.png.c14af9cb513dba7727a39ef35718d90f.png

2. About me https://www.coachcourtney.net/about

image.thumb.png.85b878bb586be952165c0c4ae42e390d.png

image.thumb.png.926991cedeea5151e7964642f0ffd086.png

3. Training packages https://www.coachcourtney.net/trainingpackages

image.thumb.png.82b73a55637fc0456bd1ae475516a4e3.pngimage.thumb.png.1bd6d0a1face474ad5034fa4b04eca72.png

 

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.image.thumb.png.502af1e2a2fad71e73d1a3e86bf0a4b6.png

So sorry for bombarding you with these problems.. I'm not really good at this.

Thank you so much.

 

Edited by shandyyym
Added some texts
Link to comment
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/

image.thumb.png.7885824868295fc223ab9ed902d655e4.png

image.png

image.thumb.png.c14af9cb513dba7727a39ef35718d90f.png

2. About me https://www.coachcourtney.net/about

image.thumb.png.85b878bb586be952165c0c4ae42e390d.png

image.thumb.png.926991cedeea5151e7964642f0ffd086.png

3. Training packages https://www.coachcourtney.net/trainingpackages

image.thumb.png.82b73a55637fc0456bd1ae475516a4e3.pngimage.thumb.png.1bd6d0a1face474ad5034fa4b04eca72.png

 

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.image.thumb.png.502af1e2a2fad71e73d1a3e86bf0a4b6.png

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.

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
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.

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
  • 5 weeks later...

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"]

image.png.2aef8c7d56f348bb9b34b96107d58874.png

and this section: 

section[data-section-id="60dd2c4d82999b17efdb6eec"]

image.png.f5a244844e2a3c318206f7ef48cdf621.png

 

but it's not actually working 😞

Please help.

image.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...