• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Ho to Remove an Image from Mobile Devices?

Contributor ,
May 02, 2022 May 02, 2022

Copy link to clipboard

Copied

I have 2 waving flags bookending my header image. I would like for them NOT to appear on mobile devices.

 

www.winvoices.com

Views

324

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 04, 2022 May 04, 2022
quote

Sorry, I don't know where that code goes.


By @sneedbreedley

 

fluid-index.css open it up and look for your #logo css selector then add:

 

display: flex;
align-items: center;

 

 

Likes

Translate

Translate
Contributor ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

So it's working well, but when viewed on an ipad or tablet, the right flag jumps below the header image!

https://www.winvoices.com/

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

quote

So it's working well, but whenn viewed on an ipad or tablet, the right flag jumps below the header image!

https://www.winvoices.com/

 


By @sneedbreedley

 

 

Try setting max-width to 768px:

 

if (window.matchMedia('(max-width: 768px)').matches) {

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

Will that remove the flags when viewed on a tablet? I'd rather keep the flags on a tablet, if possible.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

quote

Will that remove the flags when viewed on a tablet? I'd rather keep the flags on a tablet, if possible.


By @sneedbreedley

 

Then try setting the logo css to:

 

#logo {
display: flex;
align-items: center;
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

Sorry, I don't know where that code goes.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

quote

Sorry, I don't know where that code goes.


By @sneedbreedley

 

fluid-index.css open it up and look for your #logo css selector then add:

 

display: flex;
align-items: center;

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 04, 2022 May 04, 2022

Copy link to clipboard

Copied

LATEST

I think that worked. Thanks so much!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines