Need help with media query

HTML & CSS
1

Here is the mini-project I’m building:
https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT
I’m on the mobile design section.

Here is my code so far (mine looks a lot better, but I can’t upload images to CodePen without buying PRO):

When you scale down to mobile size and click the circular icon, the blue section at the bottom appears. The problem is when you move it to a larger size, the section with the name, date etc. doesn’t appear.

These are the important parts to look at:

@media screen and (min-width: 521px) {
      #hide-and-show {
        display: none;
      }
      #hide-and-show div {
        display: none;
      }
      #personal-container {
        display: flex;
      }
    }

      <div class="personal-container" id="personal-contain">
          <div class="personal-container-img-text" id="hide-section">
            <div>
              <img id="avatar-img" src="images/avatar-michelle.jpg"/>
            </div>
            <div class="name-date">
              <p id="name-section"><span id="personal-name">Michelle Appleton</span><br>
              <span id="personal-date">28 Jun 2020</span></p>
            </div>
          </div>
            <div class="share-icon-container" id="hide-share-section">
              <div id="share-icon" class="popup" onclick="myFunction();" onmouseover="onHover();" onmouseout="offHover();">
                <img id="icon-share" src="images/icon-share.svg"/>
                <div class="popuptext bubble-container" id="myPopup">
                  <div><p>SHARE</p></div>
                  <div><a class="social-icon" href="https://www.facebook.com/"><img src="images/icon-facebook.svg"/></a></div>
                  <div><a class="social-icon" href="https://twitter.com/"><img src="images/icon-twitter.svg"/></a></div>
                  <div><a class="social-icon" href="https://www.pinterest.com/"><img src="images/icon-pinterest.svg"/></a></div>
                </div>
              </div>
            </div>
        </div>
      </div>
      <div id="hide-and-show">
        <div><p>SHARE</p></div>
        <div><a href="https://www.facebook.com/"><img src="images/icon-facebook.svg"/></a></div>
        <div><a href="https://twitter.com/"><img src="images/icon-twitter.svg"/></a></div>
        <div><a href="https://www.pinterest.com/"><img src="images/icon-pinterest.svg"/></a></div>
        <div id="share-icon" class="popup" onclick="myFunctionTwo();" onmouseover="onHover();" onmouseout="offHover();">
          <img id="icon-share" src="images/icon-share.svg"/>
        </div>
      </div>
    </div>
  </div>

<script>
    function onHover()
    {
      $('#icon-share').attr('src', 'images/icon-share-white.svg');
    }
    function offHover()
    {
      $('#icon-share').attr('src', 'images/icon-share.svg');
    }

    function myFunction() {
        var x = window.matchMedia("(max-width: 520px)") 
        if (x.matches) { // If media query matches
          //hide-share-section
          document.getElementById("personal-contain").style.display = "none";
          document.getElementById("hide-and-show").style.display = "flex";
        } else {
          var popup = document.getElementById("myPopup");
          popup.classList.toggle("show");
        }
      }
    function myFunctionTwo() {
      document.getElementById("hide-and-show").style.display = "none";
      document.getElementById("personal-contain").style.display = "flex";
    }
  </script>

Does anyone know why this is happening? In the media query, I set #personal-container to flex once it gets to certain size, so I thought it should appear again.

2

There is no ID called personal-container :slight_smile: It is called personal-contain.

You are also using JS to inject inline styles into the html to hide that element but that means that you cannot over-ride it from CSS unless you use the !important rule because inline attributes trump all rules except important rules.

You would need this.

/*-------Popup End -------*/
@media screen and (min-width: 521px) {
      #hide-and-show {
        display: none;
      }
      #hide-and-show div {
        display: none;
      }
      #personal-contain {/*not er on the end*/
        display: flex!important;
      }
    }

Note that (apart from the type on container) the problem was cause by not separating the styling from the js action. Let CSS handle the display in the normal way by using classes and then you won’t run into this specificity issues. The JS can then just toggle the class on or off as required. No need to start writing inline attributes.

In general avoid manipulating the styles with JS but rather use JS to add/remove css classes and that gives you more flexibility and leaves the control of the appearance to CSS in the normal way. (If you are animating an element with js then in those cases you may need to dynamically update the styles but generally avoid it if possible.)

2 Likes
3

Thanks for your advice!

What is the best option for adding and removing a text section? When you go to the mobile view and click the circled arrow icon, it changes the name and date text to the share information.

https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT

I was trying to do this with JavaScript.

4

Hi, I’m not near a computer until Monday so can’t offer code but the way I would do it is when you click the icon the JS toggles a class on a parent element. If no common parent exists then you can apply it to the body element.

You can then use that class in CSS to hide and show the items you require.

E.g. Say you added a class called share-open to the body element when the icon was clicked then you could do this.

.share-open .somestuff{display:block}
.share-open .someotherstuff {display:none}

Hope that makes sense.:slight_smile:

Back Monday.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.