CODEWITHSUNDEEP
cssmobileresponsive-design
Jeff Dowell
Jeff Dowell

Reputation: 125

How can I remove the padding and enlarge images in mobile view

On my blog, Im trying to reduce my padding inside the blue box and enlarge my images and remove hover for my mobile views. So far my code will not change it. Im just trying to make it more responsive for touch devices

@media only screen and (max-width:800px) {
    #header, #pageWrapper, #footer {
        padding: 30px 20px;
        margin-bottom: 0px !important;
    }  
    h1.logo {
        text-align: center;
        padding-bottom: 10px
    }
    .slide img {
        opacity: 1
    }
    .sqs-active-slide img {
        opacity:1
    }
    .collection-type-gallery #slideshowWrapper .slide img {
        background-color: white !important;
        margin: 2px 0;
    }
    img {
        max-width: 200px;
    }
    .hentry {
        background: #F8F9FC;
        padding: 10px;
        border-style: solid;
        border-color: #E2E7F5;
        border-width: 2px
    }
    .collection-51ca14b1e4b014f2c6e0c3e7 .slide img {
        opacity:1.0;
    }
}

Upvotes: 0

Views: 584

Answers (2)

jjj
jjj

Reputation: 1005

For the images, you need to use the !important declaration to override normal specificity style in the HTML. For example if you want to set the new width at 400px:

.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
    width: 400px !important;
    height: auto !important;
}

Upvotes: 1

beautifulcoder
beautifulcoder

Reputation: 11330

I can tell you right off the bat, your max-width is probably too high. If you are targeting a smartphone it should be at most 640px.

Upvotes: 0

Related Questions