CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Nikolay Dyankov
Nikolay Dyankov

Reputation: 137

CSS media queries issue with visualizing the right image size and margin

I am trying to add margin and reduce an image size based on the detect size of the screen using CSS media queries. However for one or another reason which I can not figure out the code is not working. What is not working: When you switch to mobile it is not adding the margins and it is not reducing the image size. The same with the tablet. Can you please help me? Below is my code:

    <!DOCTYPE html>
<html>
<head>

    <style type="text/css">
.icon-cardPayments-security
    {
    background-image: url(https://imagizer.imageshack.us/v2/620x140q90/661/XZglD4.png);
    width: 240px; height: 58px; 
    background-size: 240px 58px;
    margin-right: 10px;
    }

    @media screen and (max-width:434px) {
    .icon-cardPayments-security(      margin-right: 50px;
    margin-left: 70px;
    margin-bottom: 10px;
    margin-right: 10px;
    background-image: url(https://imagizer.imageshack.us/v2/620x140q90/661/XZglD4.png);
    background-position: 0px 0px;
    width: 160px; height: 36px; 
    background-size: 160px 36px;)

    }
    @media screen all and (min-width: 1140px) {
    .icon-cardPayments-security(  
    margin-right: 10px;
    background-position: 0px 0px;
    width: 240x; height: 58px; 
    background-size: 240px 58px;)
    }

    @media  screen and (min-width: 569px) and (max-width:1139px) {
    .icon-cardPayments-security(  width: 160px; height: 58px; background-size: 160px 58px; margin-right: 10px; margin-right: 10px;)}

    </style>

    <title></title>
</head>

<body>
    <ul class="payment-types__items">
        <li class="footer__bottom-list-item icon-cardPayments-security" title=
        "Payment Options">&nbsp;</li>

        <li class="footer__bottom-list-item icon-norton-security" title=
        "Powered by VeriSign">&nbsp;</li>

        <li class="footer__bottom-list-item icon-trustpilot" title=
        "Trustpilot">&nbsp;</li>
    </ul>
</body>
</html>

Upvotes: 1

Views: 123

Answers (1)

EdenSource
EdenSource

Reputation: 3387

You are using parenthesis after you selector, that should be bracket .classname{} :

.icon-cardPayments-security {
    background-image: url(https://imagizer.imageshack.us/v2/620x140q90/661/XZglD4.png);
    width: 240px;
    height: 58px;
    background-size: 240px 58px;
    margin-right: 10px;
}
@media screen and (max-width:434px) {
    .icon-cardPayments-security {
        margin-right: 50px;
        margin-left: 70px;
        margin-bottom: 10px;
        margin-right: 10px;
        background-image: url(https://imagizer.imageshack.us/v2/620x140q90/661/XZglD4.png);
        background-position: 0px 0px;
        width: 160px;
        height: 36px;
        background-size: 160px 36px;
    }
}
@media screen all and (min-width: 1140px) {
    .icon-cardPayments-security {
        margin-right: 10px;
        background-position: 0px 0px;
        width: 240x;
        height: 58px;
        background-size: 240px 58px;
    }
}
@media screen and (min-width: 569px) and (max-width:1139px) {
    .icon-cardPayments-security {
        width: 160px;
        height: 58px;
        background-size: 160px 58px;
        margin-right: 10px;
        margin-right: 10px;
    }
}

Upvotes: 1

Related Questions