Padding or margin on mobile devices

I know that there were simillar cases described here, but solutions doesn’t worked on my site.
On PC everything works perfect, but on mobile text some rows has very big left/right padding or margin. My website is: http://www.am-cycling.com.
Issue is visible on layout slider: AM Cycling Apparel - why we, services: Satisfaction is outs priority and texts: B2B opportunity and About us

Dear Marcin,

Thank you for reaching out to us here.

Please add the below custom CSS code into your site’s additional CSS option, which resides in Appearance > Customize > Additional CSS.


@media only screen and (max-width:991px){
   
   /* AM Cycling apparel - why we */
   .sow-slider-image-wrapper{
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
   }
   
   
   /* Services */
   #panel-8-3-0-0 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important; 
   }
   
   /* B2B Opportunity */
   #panel-8-5-0-0 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;  
   }
   
   /* About */
   #panel-8-6-0-0 .panel-widget-style{
      padding-left: 15px !important;
      padding-right: 15px !important; 
   }
   
}

You would do an adjustment if only needed.

Regards,
Kharis

Magic! Works perfect. Thank you!
Just to be sure… during future updates of theme additional css will not be overwritten, right?

Indeed, additional CSS will remain when the theme gets updated.

Please feel free to open a new topic if you need any other else.

Regards,
Kharis

Thank you! :slight_smile:

Regards,
Marcin

My pleasure :slight_smile:

Regards,
Kharis

Hi Kharis,
Could you help me one more time?
On my home page https://www.am-cycling.com/ I have “Product Series” area. It looks good on desktop, but on mobile gutter is geting very big and title fonts are small. Do you have any idea how to change it?

Thanks,
Marcin

Have you added some extra CSS code? What will happen if you put it off temporarily?

Regards,
Kharis

Yes, I have some additional css. I removed it, but this part does not changed. Below is the css that I added:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/
/* Full width shop/product page */
.woocommerce-page #secondary{
  display: none;
}

.woocommerce-page #primary.col-md-9{
  width: 100%;
}

/* Hide shop page title */ 

h3.archive-title {display: none;}

div#sidebar-footer 
	{
		margin-top:30px; 
		height: 100px;	
	}
div.header-clone
	{
		margin-bottom:20px;
	}

h3.widget-title{
  color: #fff;
}

@media only screen and (max-width:991px){

   /* AM Cycling apparel - why we */
   .sow-slider-image-wrapper{
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* Services */
   #panel-8-3-0-0 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* B2B Opportunity */
   #panel-8-5-0-0 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   #panel-8-5-0-1 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   #panel-8-5-0-2 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* About */
   #panel-8-6-0-1 .panel-widget-style{
      padding-left: 5px !important;
      padding-right: 5px !important;
   }

}

a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

input.shipping_method{
	margin-right: 25px;
}

.single-product .woocommerce-product-gallery__wrapper .owl-item > div {
    padding: 5px;
	max-height: 158px;
}

li.additional_information_tab {
display: none !important;
}

#tab-description h2 {
display:none;
}

h2.yikes-custom-woo-tab-title  {
display:none;
}

Do you have any idea how can I change gutter on mobile devices?

Hello Marcin,

You can use this CSS code:


@media only screen and (max-width:767px) {
  
  [class*='col-'] {
    padding-left: 5px;
    padding-right: 5px;
  }  
  
}

The default value is 15px.

Regards,
Kharis

Hi Kharis,

Thank you for the code. I tried this but I cannot see any difference. Could you check what I did wrong?

Thanks,
Marcin

Hello Marcin,

Try adding !important arguments.


@media only screen and (max-width:767px) {
  
  [class*='col-'] {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }  
  
}

And be sure that all your custom CSS code is error free. The easiest way to check is by validating it with this tool https://jigsaw.w3.org/css-validator/#validate_by_input.

Regards,
Kharis

Thanks. It works now.
Regarding errors - I removed all my additional css and errors are still there.

Please share all your custom CSS code, so I can check it directly.

Regards,
Kharis

Here it is:


/*
You can add your own CSS here.

Click the help icon above to learn more.
*/
/* Full width shop/product page */
.woocommerce-page #secondary{
  display: none;
}

.woocommerce-page #primary.col-md-9{
  width: 100%;
}

/* Hide shop page title */ 

h3.archive-title {display: none;}

div#sidebar-footer 
	{
		margin-top:30px; 
		height: 100px;	
	}
div.header-clone
	{
		margin-bottom:20px;
	}

h3.widget-title{
  color: #fff;
}

@media only screen and (max-width:991px){

   /* AM Cycling apparel - why we */
   .sow-slider-image-wrapper{
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* Services */
   #panel-8-3-0-0 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* B2B Opportunity */
   #panel-8-5-0-0 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   #panel-8-5-0-1 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   #panel-8-5-0-2 .panel-widget-style{
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* About */
   #panel-8-6-0-1 .panel-widget-style{
      padding-left: 5px !important;
      padding-right: 5px !important;
   }

}

a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

input.shipping_method{
	margin-right: 25px;
}

.single-product .woocommerce-product-gallery__wrapper .owl-item > div {
    padding: 5px;
	max-height: 158px;
}

li.additional_information_tab {
display: none !important;
}

#tab-description h2 {
display:none;
}

h2.yikes-custom-woo-tab-title  {
display:none;
}

@media only screen and (max-width:767px) {
  
  .panel-grid-cell {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }  
  
}

Hello there,

I am sorry for the delay. Could you please point me to the one of the row/section in your front page which its left and right padding are huge on mobile?

Regards,
Kharis