レスポンシブにできません困ってます・・・。
解決したいこと
HPがスマホに最適化できません。
どうしたらいいですか？
このHPです↓
https://protine-d.space/
発生している問題・エラー
なし
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
ソースコードを入力
```css
/* */
@media screen and (min-width:481px) {
body {width:100%;}
}
@media screen and (min-width:1260px){
img {max-width:1260px;}
}
body {
max-width: 1280px;
min-width: 481px;
width: 100%;
text-align: enter;
justify-content: center;
margin-right:auto;
margin-left: auto;
}
body span {
font-size: 16px;
font-weight: 600;
}
/* open */
.oop {
text-align: center;
margin-bottom: 0;
}
.oop button {
margin-top: 0;
font-size: 20px;
}
h3 {
font-family: 'Rampart One';
}
/* button */
button {
background: rgb(223, 233, 223);
border-radius: 3px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 220px;
padding: 10px 25px;
color: #f9efef;
transition: 0.3s ease-in-out;
font-weight: 600;
box-shadow: 5px 5px 0 #09f014;
border-radius: 50px;
}
button:hover {
background-color: #65e707;
box-shadow: 0 0 0;
transform: translate(5px, 5px);
}
button:after {
position: absolute;
top: 50%;
right: 20px;
transition: 0.2s ease-in-out;
content: "\f0da";
font-family: "Font Awesome 5 Free";
font-weight: 900;
transform: translateY(-50%);
}
.head_img {
text-align: center;
}
.all_c {
display: flex;
justify-content: space-between;
}
.all_b {
display: flex;
justify-content: space-between;
}
/* 転生マッスル */
.container_1 {
display: flex;
justify-content: center;
background-color: aquamarine;
width: 600px;
height: 600px;
min-width: 275px;
max-width: 550px;
box-shadow: 5px 5px 10px #baecbd;
margin-bottom: 20px;
}
.container_1 img {
box-shadow: 0 20px 2px 5px rgba(33, 227, 65, 0.5)
}
.title_a {
font-size: 18px;
color: #fff;
text-shadow: 1px 1px 1px #ff9800, -1px 1px 1px #ff9800, 1px -1px 1px #ff9800, -1px -1px 1px #ff9800, 1px 1px 1px #ff9800, -1px 1px 1px #ff9800, 1px -1px 1px #ff9800, -1px -1px 1px #ff9800;
}
/* アニメーション */
.container_1 img {
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes zoomIn {
0% {
transform: scale(0.2);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
.container_2 {
display: flex;
justify-content: space-around;
margin-top: 10px;
background-color: aquamarine;
min-width: 275px;
max-width: 550px;
box-shadow: 5px 5px 10px #baecbd;
}
.container_2 figcaption {
text-align: center;
font-size: 14px;
font-family: 'Rampart One';
}
.text_t {
font-size: 12px;
position: relative;
padding: 1rem 2rem calc(1rem + 10px);
background: #c5f792;
margin: 10px;
text-align: center;
}
.text_t:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 4px solid #000;
}
/* つくブル */
.title_b {
font-size: 18px;
font-style: italic;
letter-spacing: .1em;
color: #fff;
text-shadow: -4px 3px 0 #fa4141, -8px 6px 0 #000;
}
.text_tb {
font-size: 12px;
position: relative;
padding: 1rem 2rem calc(1rem + 10px);
background: #1b1a15;
margin: 10px;
text-align: center;
color: aliceblue;
}
.text_tb:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 4px solid #000;
}
/* ドールズ */
.title_c {
font-size: 18px;
margin: 10px;
color: #fff;
background: #015dac;
background-image: radial-gradient(#0175d5 13%, transparent 13%), radial-gradient(#0175d5 13%, transparent 13%);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
}
.text_td {
font-size: 12px;
position: relative;
padding: 1rem 2rem calc(1rem + 10px);
background: #d9e1e3;
margin: 10px;
text-align: center;
color: rgb(58, 58, 55);
}
.text_td:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 4px solid #000;
}
/* お問合せ */
.container_3 {
display: flex;
flex-direction: column;
align-items: center;
min-width: 275px;
max-width: 550px;
width: 400px;
margin: auto;
margin-top: 50px;
margin:2em 0;
position: relative;
padding: 0.5em 1.5em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
.container_3:before, .container_3:after{
content: '';
position: absolute;
top: -10px;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;
}
.container_3:before {left: 10px;}
.container_3:after {right: 10px;}
.container_3 img {
box-shadow: 5px 5px 10px #aaf2af;
}
.container_3 figcaption {
font-family: 'Rampart One';
}
h3 {
margin-bottom: 0;
margin-top: 100px;
}
.blog img {
width: 100px;
}
.blog button {margin: 20px;}
### 自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
一応自分なりに調べてメディアクリを実行しましたが、上手くいきませんでした。
助けていただけたら幸いです。
ご教授お願いします。
0
