[渡辺怜]

【お使いの Snow Monkey のバージョン】  14.3.4
【お使いの Snow Monkey Blocks のバージョン】11.4.0

【お使いの Snow Monkey Editor のバージョン】5.06

【お使いのブラウザ】Google Chorom

【当該サイトのURL】https://hotsacademy.com/wp/

 

### 実現したいこと

ヘッダーに追加した２つのボタンを
スマホ画面では非表示、または、一列に入るように整えたい。

### 発生している問題

いつもありがたく使わせて頂いています。

現在は、

<div class="my-header-content_button">
<a class="c-btn header-button-online" href="https://hotsacademy.com/wp/hots-for-school/">学校・塾の方はこちら</a>
<a class="c-btn header-button-online" href="https://hotsacademy.com/wp/hots%e3%81%ae%e5%ba%83%e5%a0%b4/">HOTSの広場</a>
</div><code></code>

body {
color: #6D6D6D;
}

.header-button-online {
border: 6px solid #FF914D;
color: #FF914D;
display: block;
font-size: 18px;
font-weight: bold;
line-height: 1;
margin: 30px auto-flow;
padding: 15px ;
text-align: center;
text-decoration: none;
width: 234px;
background-color:#fff;
float:right;
margin-right: 10px;
}
}
@media (min-width: 767px) {
.c-btn header-button-online {
display: none;
}
}

これでは、スマホだと画像のようになってしまいます。

不慣れなものですみませんが、ご教授ください。

♥ 0

いいねをした人: 居ません

[GONSY]

こちらにチェックを入れなければスマートフォンでは表示されません。

 

@media (min-width: 767px) {
.c-btn header-button-online {
display: none;
}

とありますが、これは767pxより大きい場合となるので、スマートフォン用ということであれば

@media (max-width: 767px) {
	.c-btn header-button-online {
		display: none;
}

がベターです。
上記のカスタマイズ画面でチェックを入れれば必要ないと思いますが。。。

♥ 1

いいねをした人:

[渡辺怜]

ありがとうございます。

おかげさまで解決しました！

♥ 1

いいねをした人:

[投稿者]

投稿