Resizing Images/Responsive Design for Mobile Optimization

Site URL: https://www.coachcourtney.net/

Hi, please help.

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,

You mean

Make image touch the bottom of section?

Yes please @tuanphan

On 9/23/2021 at 12:12 AM, shandyyym said:

Yes please @tuanphan

Add 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;
}
}