Code element width and content issue at media query

HTML-CSS
#1

Tell us what’s happening:
Hi Folks,

Thanks for any help in advanced…

  1. Within a media query i have set to apply at 400px, i have rules for my Code elements where i want their width to be 100%, unfortunately this is not applying.

Although the margin-left i have set is applying… Not sure why this is not working…

  1. The other issue is that just 1 of my code elements, under the If…else statement article, is having an issue where the code inside is not fitting within the Code element box. Around 456px it stops conforming to the Code element box and just flows out…

This is confusing since every other code inside the other code element boxes are staying within the Code element box.

Thanks again for any help provided. Please let me know if any further information is required.

Your code so far

https://codepen.io/Cl0udFir3/pen/qBqEoKd

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

#2
  1. Keep in mind that code element needs to adhere to the parent elements. It will not necessarily have the actual 100% of the width of the screen, but the space that it’s able within the parent. For example if parent element has set some margin then the actual 100% width of the code element will be limited by that margin.
  2. That’s because those words are without any whitespace and they simply can’t be wrapped around more. There’s few ways to deal with this - changing the text (which is bound to give the same result at some point later anyway), setting some arbitrary min-width to the element, or instead setting any specific value using the fit-content for it.
1 Like
#3

Thank you very much! :smiley:

with your advise I got it to a good enough place at this point lol, that if…else section is the only problem x)

#4

This might sound a bit strange at first, but I’d suggest making sure you are looking at the window with appropriate size :slight_smile:

1 Like
#5

Hey,

Yeah sorry my bad x) I forgot to mention the issue occurs during S Mobile mode in chrome… Other than that it appears as wanted. I just like to make it act as much as the example as possible.

#6

What I meant was that there are two @media queries on the page, and while min-width set for the max-width: 400px was preventing the text from flowing out. There was a point when width was slightly bigger than that and text flows out, but rule wasn’t set for that case.