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

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

928

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;

 

 

Votes

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/

 

Votes

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) {

Votes

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.

Votes

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;
}

Votes

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.

Votes

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;

 

 

Votes

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!

Votes

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