CODEWITHSUNDEEP
htmlcssmobile
user3384985
user3384985

Reputation: 3017

Decreasing left padding in mobile device

I have a div where I give some padding for all size device. But one of my client wants to decrease left padding when browsing through mobile phone. Here is the code -

.price-form {
background: #438bc7 none repeat scroll 0 0;
padding: 19px 30px 10px 75px;
color: #ffffff;}

I need to be padding is padding: 19px 30px 10px 25px; in mobile device.

Thanks in advance.

EDIT:

I used following code

@media screen and (min-width : 480px){
.price-form {
    background: #438bc7 none repeat scroll 0 0;
    padding: 19px 30px 10px 25px;
    color: #ffffff;
}}
@media screen and (min-width : 978px){
.price-form {
    background: #438bc7 none repeat scroll 0 0;
    padding: 19px 30px 10px 75px;
    color: #ffffff;
}}

UI is perfectly match in laptop but not in mobile device.

Upvotes: 0

Views: 53

Answers (2)

Ateev Chopra
Ateev Chopra

Reputation: 1026

Use Media Queries. Here is a good reference.

   @media screen and (max-width : 480px){
        .price-form {
            padding: 19px 30px 10px 25px;
        }
    }

Upvotes: 1

Maharaj
Maharaj

Reputation: 58

If you need to have padding padding: 19px 30px 10px 25px; on mobile devices, you need to use max-width media query. You can change pixel in max-width according to requirement.

@media only screen and (max-width : 480px){
    .price-form {
        padding: 19px 30px 10px 25px;
    }
}

Upvotes: 0

Related Questions