Home>
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 */
}
, 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 * /
}
}
-
Answer # 1
Related articles
- css3 - [font awesome 5] is it possible to overlay images when using it as content :?
- css3 - space is created when responsive
- css3 - responsive design-not applicable
- css3 - i want to arrange images side by side with flexbox, but it doesn't work for some reason
- css3 - check the responsive image on your smartphone to enlarge
- javascript - replacing images with text with responsive support, and want to start a new line at any place
- css3 - about the responsive setting when the background color is angled and cut diagonally
- css3 - html css animation i want to auto-slide only 3 images, but i want to erase 2 screens because 2 screens are added on a pur
- css3 - about responsive web pages
- css3 - about responsive display on youtube and googlemap
- html - responsive images disappear
- css3 - images displayed in chrome are not displayed in ie
- i want to create a program that displays images in the same window as the camera window when reading ar markers using cv2aruco w
- css3 - responsive: media queries don't work at all!
- css3 - responsive table css
- css3 - airbnb replication (responsive)
- css3 - displaying images in html + css, movement when the screen width is changed
- css3 - css responsive code adapts to other parts
- css3 - i want to place multiple images at the desired position with position: absolute
Related questions
- html : When the screen width increases, the layout goes to the left, but it needs to be in the middle, how can you fix it?
- css3 - i'm having trouble centering with css
- javascript - i want to adjust the height of the iframe read from another domain
- why is html th and td not aligned?
- css3 - when hovering a div surrounded by a tag, i want to underline only a part of the div
- html - i want to arrange them side by side by adjusting the width
- html - media query specification does not work
- html - the contents of the li tag do not fit in the li
- html - does not fit in the body
- questions about combining html css animation @keyframes and javascript
.phone
is attached to thetag, so
If you write
img.phone
, it's not wrong (but you don't usually needimg
).Also includes
.phone full img
and 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
! Important
is necessary either.