Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS troubleshooting basic @media queries

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #240483
    drone4four
    Participant

    Check out this pen.

    I’m trying to figure out why the green coffee mug image doesn’t rotate as it should as described by the three different media queries. For example when the window is less than or equal to 768px, the image should transform -90deg. I had this working perfectly yesterday and I’m not sure why it isn’t working today. Notice within the media query rules, the problem persists if you swap out the .centerer class elements with img elements.

    One notable change I made since yesterday is adding the display property to the original non-media query .centerer element in the CSS. But commenting that line out doesn’t fix the issue.

    Why is the coffee mug static at different resolutions? It should be transformed.

    I’ve added bootstrap 3.3.6 to the CSS in my pen.

    #240485
    bearhead
    Participant

    You’re missing a bracket at the end of this:

    .centerer {
      position: relative;
      /* top: 50%;
      left: 50%;  */
      display: block; 
      width: 104px; 
      height: 142px;
      margin: 0 auto;
    
    #240493
    drone4four
    Participant

    Thank-you @bearhead.

    #241159
    drone4four
    Participant

    Check out my latest pen: https://codepen.io/Angeles4four/pen/ZWmeMK

    I’m now trying to get the green coffee mug to appear as superscript to the left of the heading on an angle at larger resolutions, like at 900px or greater while having this same green mug disappear at a narrower resolutions. When the green mug disappears at narrower resolutions, in its place I’m trying to get the yellow coffee mug image to appear on an angle above the heading element.

    That is what I have set out to do.

    But the yellow mug as of right now appears at narrower resolution and disappears at a larger one, which is great. But the green superscript coffee mug only appears at resolutions less than 768px even though I explicitly indicate in the CSS for the display property to be none for the min-width: 768px. I also explicitly don’t use a display:none declaration for the superscript element at 900px and greater.

    I’ve been playing with @media queries without success. Could someone here enlighten me?

    I found Coyier’s guides to Media Queries for Standard Devices and his other guide for Logic in Media Queries which are interesting but which don’t really address the issue I’m having.

    Thanks, ppl.

    #241357
    drone4four
    Participant

    Did I do a not so great job at reducing my test-case?

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.