Need Help With @Media Not Working

  • Resolved 1ramyt

    (@1ramyt)


    2 years ago

    Hello,

    I need some assistance with my CSS code using @media. I’ve watched a few tutorials before posting on here, but I can’t seem to figure out why my CSS for @media is not working with iframe.

    What I’m trying to do is reduce the iframe to height: 600px after it gets down to mobile view.

    My CSS code is as follows:

    @media (max-width: 767px) {
	iframe #story-map {
		height: 600px !important;
	}
}

    The iframe code is as follows (I’m not looking to change this part, unless it’s necessary):
    <iframe width="100%" height="800" frameborder="0" scrolling="yes" margin="0 0 5% 5%" id="story-map" src="https://na-alii.maps.arcgis.com/apps/MapJournal/index.html?appid=c37ca5637eb045c8921731a730d0d647"></iframe>

    Am I targeting it incorrectly? Is there something else wrong with my CSS? I’m a bit confused as to what I might be doing wrong.

    Thank you for your help!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • catacaustic

    (@catacaustic)

    2 years ago

    The CSS should be:

    @media (max-width: 767px) {
	iframe#story-map {
		height: 600px !important;
	}
}

    No space between ‘iframe’ and the ID. The way you had it, your CSS was targetting an element of #story-map inside an iframe element.

    Thread Starter 1ramyt

    (@1ramyt)

    2 years ago

    Thanks so much @catacaustic !
    I really appreciate that. I knew it must have been something minor.
    I would not have guessed that the space was the mistake. I’ve seen other instances where it will list iframe [space] other_component. I’m guessing that’s not true when you’re targeting an id…

    Looks like I have a lot more to learn about CSS than I thought. Would you have any recommendations on good and thorough CSS tutorials/workshops/sites?

    Thread Starter 1ramyt

    (@1ramyt)

    2 years ago

    Tested, and working!
    Thanks again!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Need Help With @Media Not Working’ is closed to new replies.