レスポンシブルで幅を狭めると、ロゴ（画像）が消えていってしまう。

HTMLとCSSに多少知識がついてきた程度の初心者です。レスポンシブルで幅を狭めると、左に配置したロゴがどんどん小さくなり消えていってしまいます。ロゴを同じ大きさのままで表示させたいのですが、そのCSSがわかりません。

最後に消えてしまう画面、

関連するHTMLとCSSですが、

HTML
1 <footer class="footer">
2        <div class="wrapper">
3            <a href="rss.xml"><img class="rsslogo " src="images/logo1.png" alt="rss"></a>
4            <p class="copy futo1 order1"ppp><small><a href="blog/privacy-policy/" style="text-decoration: none;">privacy policy</a></small></p>
5        </div>
6            <p class="copy futo order3"ppp><small><a href="index.html">&copy;yukio.asia</a></small></p>
7            <p class="copy futo1 order2"ppp><small><a href="blog/notation-based-on-the-specified-commercial-transactions-law/" style="text-decoration: none;">notation-based-on-the-specified-commercial-transactions-law</a></small></p>
8    </footer>

ロゴのCSS

CSS
1.rsslogo {
2    width: auto ;
3    max-height: 18px;
4    margin-left: 00px;   
5    margin-right: 0px;
6    margin-bottom: 0px   
7}

フッターのCSS

CSS
1.footer{
2    display: flex; 
3    justify-content: center;
4    padding: 15px 10px;
5    background-color: #FF9932;
6    align-items: flex-start;
7    
8}
9
10.wrapper {
11    display: flex;
12    justify-content: end;
13    margin-left: 20px;
14    margin-right: 20px;
15    align-items: flex-end ;
16    
17}
18
19.footer> :is(:first-child, :last-child) {
20    flex: 1 1 50%;
21  }
22
23.copy{
24    margin-left: 20px;
25    margin-right: 20px; 
26    text-align: center;
27    font-size: 1.2rem;
28    
29}

形とすれば一番上の画像のprivacy policyとロゴが大きさを変えずに、そのまま真ん中の@yukio.asiaの方の右側に多少寄って行くのが理想です。下の画像参照ください。ちなみにこのロゴの元のサイズは幅128 高さ128ピクセルです。

以上となります。どなた様か幅を狭めてもロゴを表示するCSSを教えていただけませんでしょうか？よろしくお願いいたします。

Lhankor_Mhy

2022/02/10 08:23

ロゴが画面内にあればなんでもいい、というわけではないと思いますので、どのような表示にしたいのか、ご提示いただけますか？

行動規範の内容に同意します

回答1件

.wrapperに折返し許可を与えるか

.wrapper {
  flex-wrap: wrap;
}

メディアクエリでアイコンが消える前のサイズ以下を対象にレイアウトを変更してみてはいかがですか？

追記

以下の記述をcssに追加すると
特定の画面サイズ以下用の指定をする事が出来ます。

css
1/* max-width:の後の数字以下の画面幅にのみCSSを適用させる
2この場合767px以下に適用される、767pxを変更すればしきい値が変わります。 */
3@media only screen and (max-width: 767px) {
4
5/* この括弧の中に767px以下時に適用させたいCSSを書く */  
6
7}