Decrease mobile padding?

Hi guys!

Love the Sydney theme, looks fantastic. I have just published my site and have noticed two errors which i have no idea how to get rid of. Firstly, i want to decrease the white sides/padding around the content on mobile. Especially the pictures. I want the pictures to go all the way to the edge of the screen. The words/content i want to go within a few mm. Is this possible? If so, can you please provide the custom css that i would need?

website: http://www.where2wander.com/

Thanks in advance for any assistance.

Caleb

Hello Caleb,

Thank you for getting in touch here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width: 479px){
   
  html,
  body{
    overflow-x: hidden;
  }
  
  .page .page-wrap .content-wrapper, 
  .single .page-wrap .content-wrapper,
  .panel-grid-cell{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }  
  
  .roll-project{
    width: calc(100% + 10px);
    width: -moz-calc(100% + 10px);
    width: -webkit-calc(100% + 10px);
    margin-left: -5px;
  }
  
  img{
    max-width: calc(100% + 10px);
    max-width: -moz-calc(100% + 10px);
    max-width: -webkit-calc(100% + 10px);
    margin-left: -5px;
  }
  
}  

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Thanks for your reply. A portion of it has worked.

Good things:
1- Main images on home page have no padding.
2- Featured images have no padding.

Bad Things:
1- Blog images inside the post are padded on the right side
2- The word content is to stretched and cut off. I prefer the actual content (words) as it is meant to be with the inbuilt padding.

So, is it possible to return the word content to its original padding? And to take away the right side padding on blog images?

Thanks so much for your help!

Caleb

Hello Caleb,

Try to apply the following CSS code:


@media only screen and (max-width: 479px){
 
  html,
  body{
    overflow-x: hidden;
  }  
  
  .page .page-wrap .content-wrapper, 
  .single .page-wrap .content-wrapper,
  .panel-grid-cell{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }  
  
  .roll-project{
    width: calc(100% + 10px);
    width: -moz-calc(100% + 10px);
    width: -webkit-calc(100% + 10px);
    margin-left: -5px;
  }  
  
  .entry-thumb img{
    width: calc(100% + 10px);
    width: -moz-calc(100% + 10px);
    width: -webkit-calc(100% + 10px);
    margin-left: -5px;
  }  
  
  .entry-title,
  .entry-summary{
    padding-left: 15px;
    padding-right: 15px;
  }
    
  
}  

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Thanks for your reply again. That hasn’t worked either. It has made the word content have minimal padding and the photos don’t go all the way to the edge, they still have the right side padding as well as a little left side padding now.

Basically, is it possible to have a code that will mean i have no padding at all on any photos for mobile? I don’t want to change the word/content padding.

The code for the imaging on the first post you replied was perfect. I just want to keep the original word content padding.

I hope this makes sense.

Thanks Kharis!

Caleb

Dear Caleb,

Thank you for updating me.

What is screen resolution you are using? You can check it here http://www.whatismyscreenresolution.com/

Regards,
Kharis

Hi Kharis,

It is 320x568. An iphone 5s. But i want the pictures with no padding on all screens. Is that possible?

Cheers
Caleb

Dear Caleb,

Try to apply the following CSS code:

@media only screen and (max-width:767px){
  
  html,
  body{
    overflow-x: hidden;
  }  
  
  .page .page-wrap .content-wrapper, 
  .single .page-wrap .content-wrapper,
  .panel-grid-cell,
  .blog-post{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }  
  
  .roll-project{
    width: calc(100% + 10px);
    width: -moz-calc(100% + 10px);
    width: -webkit-calc(100% + 10px);
    margin-left: -5px;
  }  
  
  .entry-thumb img{
    width: calc(100% + 10px);
    width: -moz-calc(100% + 10px);
    width: -webkit-calc(100% + 10px);
  }  
  
  .entry-title,
  .entry-summary{
    padding-left: 15px;
    padding-right: 15px;
  }
  
}

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Thanks for your patience in dealing with me! The last code you gave me is the best so far. It is how i want on every page except two, the blog page and the single blog posts.

On these two pages, the word content and the photos having the same padding. I want the images to extend out past this padding and go right to the edge of the screen so there is no white around the images.

I have tried changing every one of the numbers above to see if it makes a difference, but every time it changes the padding on both the word content and the image to the same amount.

So basically, i need a code that extends the images of blog posts past the padding of the word content by say 20px.

I

Kharis,
My site: www.samhir.com
when opened on laptop, is fine. The first widgets are aligned.
problem is the site origin editor in which I am using fb embedded video creates white space around the video wdiget when opened in mobile.
Could you help me with this.
Also, if a custom css could be added for the mobile css option in the row widget area itself?

Hello @samhir,

Please try this plugin:

Regards,
Kharis

@Kharis Thanks a lot. It worked.
Kharis! Yo my man!
Samhir