-3

I was editing a Wordpress theme and I added a content box to Bootstrap's <div class="well">. I had to remove the content box's padding-bottom and margin-bottom because while on desktop there was a lot of space in the contentbox after the content box was displayed. While the removal of padding and margin works well on desktop, it overflows on mobile. The image as follows:- enter image description here

On PC, it looks like this :- enter image description here

Anyways, this is the content box that comes inside <div class='well'>:

.site-content article {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    padding-bottom:auto;
    margin-bottom:auto;
}

3 Answers 3

2

Try to add padding-bottom with media queries in your css :

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

 Your content box class { 
     padding-bottom: ;
     margin-bottom: ;

 }

}

1
0

Change the margin and padding only if the document is smaller than 500 pixels wide:

@media screen and (max-width: 500px) {
    .site-content article {
       padding-bottom:0px;
       margin-bottom:0px;
}
0

In wordpress you have a php function that return true if it's mobile wp_is_mobile() and with that you could put the class that you want in your HTML.

And wordpress add class .mobileto your bodyso you could put different padding if have .mobile class or not.

2
  • can you explain a bit?? May 9, 2015 at 7:08
  • By default, WP have a function that you can use for mobile, for example, if you can add a class to your HTML code when you are on mobile: <div class="one <?php if ( wp_is_mobile ) echo 'mobile'; ?>">. But if you can't use this function, WP, when you are on mobile, add the class .moble to your body: <body class="... mobile">
    – fcastillo
    May 9, 2015 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.