Home>

css3 - html css is responsive and displays huge images

I'm sorry for the busy time, but I will ask you a question.

About smartphone settings. (@Media only screen and (max-width: 414px) {part)

.phone img {
width: 10px;! important;/* Priority */
}

I set

, but the image is displayed larger than the width of the smartphone.
Thank you very much.

<! DOCTYPE html>
<html>
<head>
    <title>Free point card/stamp card (app) Stamp Card Piece</title>
    <link rel = "stylesheet" type = "text/css" href = "reset.css">
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0">
    <meta http-equiv = "content-type" charset = "utf-8">
    <script src = "https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
    <!-wrapper start->
    


        <!-original start->
        
        
        <p>Please leave the development and operation of the original point card!</p>
        <p>Example of using StampCard Piece<br></p>
        <!-Translucent white->
        
            
            
            
            <p><Core system integration><br>Yokohama Corporation<br>
            Since it can be linked to individual sub-systems that are not limited to apps<br>, "Mogiri" Kuo-Pon and effect measurement are also as expected<br>
            <p><Large-scale operation><br>Kirindo Co., Ltd.<br>We have a track record of operating<br>applications that support 1.26 million members. Push<br>Know-how for mass access after notification is also active.</p>

            <p><Campaign><br>Haagen-Dazs Japan Co., Ltd.<br>Countermeasures for many users<br>Careers using various technologies such as scanning receipts<br>br>also supports.</p>
        

        
        



</body>
</html>
body {
    font-family: 'Hiragino Sans', 'Hiragino Sans', YuGothic, 'Yu Gothic', sans-serif;
    color: # 2a2d2a;
    letter-spacing: 0.05em;
    line-height: 1.5;
    overflow-x: hidden;
}
a {
    transition: .4s;
}
a: hover {
    opacity: 0.7;
      -webkit-transform: translateY (-2px);
  transform: translateY (-2px);
}
/ * caption * /
.caption {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
h2 {
    display: inline-block;
    position: relative;
    font-size: 32px;
    font-weight: bold;
    padding: 1em 0;
}
h2: before {
    position: absolute;
    width: 110%;
    height: 22px;
    left: 0;
    top: 0;
    content: '';
    background: url (img/b_ornament.png);
    margin-left: -0.5em;
}
h2: after {
    position: absolute;
    width: 110%;
    height: 22px;
    left: 0;
    bottom: 0;
    content: '';
    background: url (img/b_ornament.png);
    margin-left: -0.5em;
}

/ * original * /
# original-all {margin: 10px auto 0 auto;
    background-image: url (img/haikei.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 90%;
    padding: 10px 0;
    font-size: 1.2rem;
    font-weight: bold;
}
#original p {
    font-size: 100%;
    text-align: center;
}
# original-all .komoji {
    font-size: 100%;
    margin-bottom: 10px;
    text-align: center;
}
#original {
    background: rgba (255,255,255,0.7);
    border-radius: 0px;
    margin: 5% 0;
    padding: 3% 0;
}
.container {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 5%;
    / * grid-template-rows: 200px 200px;* /
}
.phone {
    width: 100%;
}

#container_dentaku
{
    display: flex;
}
img.dentaku {
    width: 8%;
}
#dentaku_moji p {
    margin: 2px;
    line-height: 1.5;
}
.simyure-ta {
    font-size: 100%;
}
.komoji {
    font-size: 100%;
    padding-bottom: 20px;
}
#dentaku_moji A {
    font-size: 95%;
}


.contact .contact_a2 {
    margin-top: 20%;
}
/ * footer * /
.footer {
    color: #fff;
    background: # f7001e;
    text-align: center;
}
#footer {
    width: 100%;
    background-color: $red;
    color: #fff;
    font-size: 12px;
    font-family: Helvetica, sans-serif;
    letter-spacing: 1px;
    position: relative;
}
#footer .content-width {
    width: 980px;
    max-width: 100%;
    margin: 0 auto;
}
.footer-nav-wrap {
    display: block;
    text-align: center;
    padding: 24px 0;
    @include mq {
        padding: 24px 0 0;
    }
}
.footer-nav {
    display: inline-block;
    text-align: center;
}
.footer-nav li {
    display: inline-block;
    font-size: 14px;padding: 0 4px;
    color: #fff;
    @include mq {
        display: block;
        padding: 8px;
        margin: 0 0 8px;
        &.sp-none {
            display: none;
        }
    }
}
.footer-nav li a {
    display: inline-block;
    font-size: 14px;
    padding: 0;
    color: #fff;
}
.footer-nav li a: hover {
    opacity: 0.7;
}
.footer-credit {
    padding: 24px 0;
}
#footer .left {
    display: flex;
    align-items: center;
    float: left;
    margin: 0 0 0 10px;
    @include mq {
        float: none;
        margin: 0 auto 8px;
        justify-content: center;
        }
    }
}
#footer .right {
    float: right;
    margin: 0 10px 0 0;
    @include mq {
        display: block;
        float: none;
        text-align: center;
        margin: 0 auto;
        }
    }
}
#footer .left a {
    margin: 0 0 0 6px;
    @include mq {
        margin: 0;
        }
    }
}
@media only screen and (max-width: 414px) {
.simyure-ta {
    font-size: 1rem;
}
.contact .contact_a2 {
    margin-top: 30%;
}
/ * original * /
# original-all {
    margin: 10px auto 0 auto;
    background-image: url (img/haikei.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 90%;
    padding: 10px 0;
    font-size: 1.2rem;
    font-weight: bold;
}
#original p {
    font-size: 100%;
    text-align: center;
}
# original-all .komoji {
    font-size: 100%;
    margin-bottom: 10px;
    text-align: center;
}
#original {
    background: rgba (255,255,255,0.7);
    border-radius: 0px;
    margin: 5% 0;
    padding: 3% 0;
}
.container {
    display: grid;
    align-content: space-around;
}
.phone img {
    width: 10px;! important;/* Priority * /
}
}
html5 css3
  • Answer # 1

    .phoneis attached to thetag, so
    If you writeimg.phone, it's not wrong (but you don't usually needimg).

    Also includes.phone full imgand full-width spaces.
    So, it should be okay if you cut off the full-width space.

    I added it because I found it in a place that seems to have another relationship.
    Just put a space before! important. Please delete;.
    I don't think! Importantis necessary either.

Related articles