Media queries orientation: landscape

[OBXjuggler]

kindly see www.forallthetime.com

yes i know its messy, will get to that : )

, i think my problem is in the CSS somewhere

yes, i successfully coded appropriate media queries for my small device. i am happy there

trouble writing media queries for small device landscape

i did some studying and experimenting, and i dont get it : (

first in my pen, to begin with, are my media queries written as they should? it is working on small device.

specifically, help with my .banner h1 and .text CSS

what is the proper code to turn these landscape, small device?

specifically .banner h1 and .text

i spent some time trying to figure this out

i am specifically mean the slide show and hamburger nav to drop down

i want to make a media query for the slide show landscape, for small phones and tablets

for example my .text class is the exact same code on landscape as is my code without media queries

in other words the .text class displays the ECXACT same way

please try looking at the site on a smart phone… portrait = beautiful, landscape = wonky

THAT maybe the best way to help me!! see for yourself the discrepancies

my portrait results are fine… therefore i a convinced i am making a orientation: landscape mistake somewhere

[PaulOB]

@OBXjuggler

trouble writing media queries for small device landscape

That’s your problem in a nutshell

Which device is this and what is its landscape orientation width? Do you just want it to work on your device only or the hundreds of other devices all of which have different sizes to you?

If I’ve said this once I’ve said it 1000 times now but its worth repeating:

Forget about devices and orientation.

All you are interested in is the space available for your design and what space that design needs in order to function properly. Forget about devices and concentrate on your design. Open and close your browser window slowly and as soon as the design doesn’t fit properly throw in a media query at the point and make it work (check height of screen also). With a fluid design and a few well chosen media queries you cater for all devices now and in the future and any orientation.

For example on my desktop browser your page is badly broken at certain sizes.

You don’t need to test in multiple devices just open and close your browser window or use the responsive option from the chrome devtools.

I don’t know what that codepen was supposed to be but you would almost never use media queries like that. Indeed the max-device-width media query is deprecated anyway and shouldn’t be used.

All you need is the max-width or min-width media query approach. It’s very straight forward.

I prefer the max-width approach and just work down from desktop to smaller devices

@media screen and (max-width: 800px){

}

The width you use in your media queries will depend on where your design needs adjustment and not some imaginary device size as their is no real standard device size.

In your design it looks like your hamburger menu should be active from about 810px and not at the 600px you have set.

You also need to reduce the text size in that banner as the screen gets smaller otherwise it overlaps all the content. I would do something like this:

#banner h1{
  font-size: clamp(1.75rem, 12vw, 6rem);
}

That would produce this effect rather than the overflowing text as in the previous picture.

Regarding the slideshow then you need ot take the same care and find a size that works best across the range. As a starting point I would look at something like this:

.text{
  font-size: clamp(1rem, 3vw, 3rem);
}
@media screen and (max-height:500px){
.slideshow-container{max-width:450px;}
.text{font-size:1rem}
}
@media screen and (max-width:900px){
.slideshow-container{max-width:450px;}
}

That’s just a rough idea and not meant as a full solution. I’m not keen slideshows on mobiles and I would tend to hide them altogether unless they were one of the top end swipe-able responsive slideshows which take a lot of expert coding to get right.

You need to work through your page as mentioned above and adjust the elements based on the available space. It’s a design methodology that should really have been a starting point and not an add on at the end unfortunately but it is still possible.

Have a go and see how you get on but if you have specific problem areas then ask in here the best way to approach it.

[OBXjuggler]

Many thanks!

this has been an issue for me for a while, and your single response is more helpful than ANYTHING else i have tried!

you said (and really caught my interest) :

“You need to work through your page as mentioned above and adjust the elements based on the available space. It’s a design methodology that should really have been a starting point and not an add on at the end unfortunately but it is still possible.”

i kindly ask you to elaborate.

maybe pass on to me a few examples, what does that code look like? maybe not my site in particular (i will leave that to your discretion) i am looking for something to visually grasp

please be clear : )

is what you are telling me is i need a “mobile first” approach?

i am grateful for a better, more appropriate, way to write code

i will DEFIANTELY get to your code suggestions, but not now… bedtime

i saw there was no orientation: landscape

again you said above " Forget about devices and orientation."

shall i never have an orientation: landscape need in my future?

i will keep you in the loop!

obviously i am on a learning curve here

but the best i can do is study, code projects, and ask for help, right?

again, you have been the single biggest help so far!!

T

[PaulOB]

@OBXjuggler

i kindly ask you to elaborate.

@OBXjuggler

is what you are telling me is i need a “mobile first” approach?

It can be either mobile first or desktop first (min-width or max-width media queries). However I prefer the desktop first approach because that’s the way I’ve been designing for the last 25 years and the way I am used to. It is also easier for me to have a full screen version and then create a mobile version from that full screen version.

However, that’s my personal preference and designing from a mobile first and upwards approach is good also except that generally (as a freelancer) you are handed the full desktop design first and then have to work out to how to make it work on smaller screens.

Whatever approach you take is fine as long as you are consistent.

I start without any media queries and create the page wrapper and start on the header and navigation The navigation is effectively the most important thing on the page (apart from the actual content of course).

With a horizontal nav you have to ask yourself a number of questions before you start.

How many menu items does the nav have?
Will the items change over time and have more or less entries.
Will the text change on the menu items?
How will the nav cope with a font-size change?

Once you have answers to those problems you can build your nav and then decide at what max-width media query breakpoint you want to create the hamburger menu. Only you and your design will know where this point is and you can do this by opening and closing the browser window until something breaks or looks odd. That breaking point will be where you start forming your max-width media query and take into account any of the questions I listed above.

Once you have done this section and checked all widths and checked in a few different browsers (and validated the html and css) then you can move onto the next section and more or less forget about it.

You then move down to the next element on your page whatever that is and do exactly the same approach.

If you approach each section at a time and test thoroughly you can be sure that everything will work when finished. I tend to keep the media queries just below the section they apply to rather than tacking them all at the end (unless its a simple document) but that’s just a personal preference.

It’s no good designing a whole page and then starting to test and validate at the end as it may be too late to fix by then. Quite often a design will only work if the foundations have been laid properly and fixing something afterwards can be awkward if the structure was not right from the start.

@OBXjuggler

again you said above " Forget about devices and orientation. "

shall i never have an orientation: landscape need in my future?

I haven’t ever used the landscape orientation in the last 10 years on the few hundred sites I’ve worked on. It’s really only of use if you are building an app on a specific platform or device.

All landscape heights are different and indeed most users hold their phones in portrait unless they are viewing videos. Even for videos you don’t really need to know about landscape as videos usually have the same aspect ratio and the height will be dependent on the width of the video.

A lot of times users turn their phones to portrait simply because the designer did a bad job of coding the site and they have trouble reading the content in portrait. If designed properly you don’t really need to turn the phone.

If you were thinking you could make a slideshow fit in the height of a landscape phone then that would be quite a task as my phone is only 320px and even if you set the height of your slideshow to match that dimension it means I would have had to scroll my phone to the exact point of that slideshow otherwise top or bottom may be obscured. This is not a viable approach.

Phone users know that they have to scroll so just set a reasonable height where space is limited.

Mostly it’s about making best use of the available space.

If at any time you see a horizontal scrollbar on the viewport then that means you have not made the design fluid enough and a device somewhere in the world will die. A horizontal scrollbar on the viewport is something you need to avoid at all times as far as responsive design is required.

It’s always good to remember also that not everyone has their desktop window maximised. I have a large 27" screen and have 3 browsers and a number of applications open at the moment and all arranged at different size and heights. I still like to be able to read each of those without having to maximise or move the window around. That means that even though my screen resolution is 2500px I am typing this message in a browser window that is toughly 800px x 1000px. In essence you have to cater for an infinite variety of sizes so you can’t do that with an infinite number of media queries.

Create responsive/fluid elements (flexbox and grid are good at this) and then add media queries when the elements are no longer flexible enough to fit.

These articles are old (2012) but explain the concept I just mentioned.

http://tangledindesign.com/deciding-what-responsive-breakpoints-to-use/
https://www.smashingmagazine.com/2012/03/device-agnostic-approach-to-responsive-web-design/

Even in 2012 there were too many devices to account for. There are hundreds more now.

[OBXjuggler]

[quote=“PaulOB, post:2, topic:359957”]

thanks! i have read you through and both articles

please know i appreciate your time and patience…please know this is all new to me! all the books i have read and courses i have taken did not address this

you wrote “All you are interested in is the space available for your design and what space that design needs in order to function properly”

please elaborate, or communicate this in a different way. i do not follow

. “Forget about devices and concentrate on your design.”

this seems straightforward

" Open and close your browser window slowly and as soon as the design doesn’t fit properly throw in a media query at the point and make it work (check height of screen also)."

i get breakpoints and the media query concepts

i am embarrassed to say, and i have tried to figure it out, where to make a breakpoint, yes i see my site change at different browser sizes… where do i find the actual numbers for a media query?

“With a fluid design and a few well chosen media queries you cater for all devices now and in the future and any orientation.”

do i understand fluid design is achievable using flexbox and CSS grid?

yes, i am familiar with these!! there is hope!!!

what would be an example of a “well chosen media query”?

please know i am feel better when i see “With a fluid design and a few well chosen media queries you cater for all devices now and in the future and any orientation.”

its comforting!

“You need to work through your page as mentioned above and adjust the elements based on the available space. It’s a design methodology that should really have been a starting point and not an add on at the end unfortunately but it is still possible.”

yes, i asked this already, please illuminate : )

kindly pass on a web site that addresses specifically, unless you want to try : )

i hope i have that right! that was in landscape mode.

the #banner h1{
font-size: clamp(1.75rem, 12vw, 6rem);
}
only affected my portrait

i definitely want to hide the slide show from land scape

i get that i am not caught in a horrible situation, that its not too late

“If you approach each section at a time and test thoroughly you can be sure that everything will work when finished” good to know!

“If designed properly you don’t really need to turn the phone.” well said!

that’s a goal for me

BOY that’s a lot!

again, i sincerely thank you!

you are truly helping a new comer become a better coder!

that’s a good thing!!

[PaulOB]

I’ll reply in full later when I have a bit more time but a quick couple of points before I go.

@OBXjuggler

only affected my portrait

There is no portrait. There is only available space (i,e the canvas that you draw your design on). (This is a common theme)

The code works as shown in my live screenshot,

I’m still seeing this in your CSS:

  @media only screen and (min-width: 320px) and (max-device-width: 812px) {
     #banner h1 {
      font-size: 3rem;
    }
  }

max-device-width is deprecated. Do not use it. It’s of no use to you at all.

Use max-width instead.

Don’t mix min-width and max-width ranges in the same media query unless you really have a need to (you rarely will need to).

e.g.If I change the max-device width to max-width as I have mentioned several times then the rule above becomes this.

  @media only screen and (min-width: 320px) and (max-width: 812px) {
     #banner h1 {
      font-size: 3rem;
    }
  }

That rule says that anything above 320px and anything below 812px will get the rules applied. So in one fell swoop you have dismissed all devices less than 320px (not that many exist). What if a new device was 319px?

You simply need to say:

  @media only screen and  (max-width: 812px) {
     #banner h1 {
      font-size: 3rem;
    }
  }

Now you have catered for devices below 812px.

@OBXjuggler

i hope i have that right! that was in landscape mode.

There is no landscape. There is only available space

Forget about landscape. There is no landscape. Its just about available space for the design to fit. A desktop window resized to a small height is effectively landscape so you can’t detect it. You just have to code for it accordingly in your design.

@OBXjuggler

where do i find the actual numbers for a media query?

When you have the chrome devtools open and you start to open and close your browser window the devtools writes the width and height in the top right hand corner while you scroll.
Alternatively click the “toggle device toolbar” in the top left f the devtools panel and use the responsive mode. You will get a window with a drag handle at the bottom that you can drag and the corresponding width and height are displayed at the top.

@OBXjuggler

do i understand fluid design is achievable using flexbox and CSS grid?

A fluid design is baked out of the box by default. It’s only when you start adding your css rules that you stop it being fluid.

Fill a browser window with lorem ipsum text and it will display anywhere and any device and in any size for all of time. It’s once you start styling that problems occur. You start aligning things into boxes that don’t scale well and don’t fit.

The skill is in making things look good while at the same time adapting to their current environment. As Bruce Lee said “Be water my friend”

Flexbox and grid allow items to be laid out in different ways and to allow some fluidity in the design. You don’t need either if your design is simple and you can create perfectly usable sites with simple basic code.

@OBXjuggler

yes, i asked this already, please illuminate : )

I already explained that and its when you open and close your browser window until something doesn’t fit and then you stop and make it fit better. It couldn’t be simpler than that. It’s simple but not always easy ;).

Your nav is a perfect example of how to test and in the screenshot below you can see I have dragged the page until the nav breaks.

You can see the nav has wrapped so you would need to find the point where it doesn’t wrap and then go into your media query and apply the hamburger toggle routine in time.

@OBXjuggler

i definitely want to hide the slide show from land scape

Then decide at what screen height the slideshow would look odd and at what width you think would be a minimum and you can combine both queries and set the slideshow to display:none.

I’ll be back tomorrow to clarify some other points

[OBXjuggler]

i did some research.

there are multiple people with my exact problem…

i found no working solution anywhere… though landscape and portrait were mentioned through ought the code

anything else that would be helpful to me?

it would be fantastic to make this work… it must be able to work because you can see this code everywhere!!!

also, ALL future projects will be built fluid!

in fact, i am considering re-making this current site fluid, with RWD where needed

again, thanks!!

T

[TechnoBear]

@OBXjuggler

there are multiple people with my exact problem…

i found no working solution anywhere…

Can you clarify exactly what your problem is now?

Paul has given you a lot of guidance already. It would be helpful to know how far you’ve got and see your updated code.

[PaulOB]

@OBXjuggler

i found no working solution anywhere

You don’t seem to be listening to me or not understanding the concept perhaps. I gave you hints to workable solutions and methods to accomplish what you want. You don’t reslly need to look anywhere else as I have given you the advice you need. Indeed at your current level you are not able to make the choice about what is the right approach as you may be reading the wrong resources.

e.g.

@OBXjuggler

though landscape and portrait were mentioned through ought the code

Then they are the wrong resources, or old resources, or ill informed resources.

You need to choose your resources carefully but as a beginner you may find that difficult which is probably why you came to the forum to ask advice from experts and from people who make a living out of this over the last 20 years.

@OBXjuggler

it would be fantastic to make this work… it must be able to work because you can see this code everywhere!!!

I already gave you snippets to make your page start working. If you have specific problems then ask a question about one aspect of the design that you are having trouble with and we’ll try to walk you through it step by step. Your front page is something I could code in an hour so its not rocket science and I’m not the brightest spark in the box

However you do need to grasp the concept that the web is not a piece of parer at a set size. It’s like a piece of paper that has no defined edges and your design needs to fit no matter what the size the piece of paper. Portrait and landscape do not actually exist in any real sense of the word as they are just another size to cope with in a myriad of size configurations.

AsI said above lets break this down to one step at a time and ask one specific question about an element you are having problems with and we’ll get that one element working which will then help you in dealing with other similar elements.

[SamA74]

@OBXjuggler

there are multiple people with my exact problem…

i found no working solution anywhere… though landscape and portrait were mentioned through ought the code

Evidence that the problem lies here:-

landscape and portrait were mentioned through ought the code

Forget orientation, forget devices, then you are closer to the solution.

[OBXjuggler]

PaulOB,

Thank you for your sage advice.

it was a little tough to read, BUT I AM HAPPY I DID!

i totally welcome your guidance

i sincerely apologize if i annoyed you.

you have SO much more under your belt than i do.

i would be a fool to not take advantage of your expertise.

i am also glad you understand that i am NEW to this.

"Indeed at your current level you are not able to make the choice about what is the right approach as you may be reading the wrong resources.

You need to choose your resources carefully but as a beginner you may find that difficult which is probably why you came to the forum to ask advice from experts and from people who make a living out of this over the last 20 years."

so, start easy, slow, wise.

start fluid

problem solve BEST i can, and ask for help if i need it…

i will always review your notes, not to double up the conversation on advice already given

i am sure you must be a busy person with responsibilities beyond holding my hand.

i sincerely thank you for this time and your patience.

i have worked as a professional juggler. one thing i have learned as a juggler: if you are not dropping, you are not pushing yourself

i freely admit i have more to learn, and am grateful i have your support

BTW

i successfully made a flexbox navigation! (it said flexbox… take a look see in the code if you are curious)

as above, you suggested i start with a nav and work from there

how do i look?

good first step?

what fluid design do you suggest next?

your words of wisdom i like

“AsI said above lets break this down to one step at a time and ask one specific question about an element you are having problems with and we’ll get that one element working which will then help you in dealing with other similar elements.”

“Forget orientation, forget devices, then you are closer to the solution.”

Paul, eventually i need a drop down menu and hamburger. i dont know how to do that without using code i find i on line… copy and paste…

i do not want to do too much! i am sure you agree!

i will get there! Rome was not built in a day, right?

i am determined to be the best web developer i can be

again, thank you!

[PaulOB]

Hi,

@OBXjuggler

i sincerely apologize if i annoyed you.

No, sorry if it came across that way. I didn’t mean to sound annoyed

@OBXjuggler

as above, you suggested i start with a nav and work from there

how do i look?

good first step?

I’ll reply in full later today as I am out for the afternoon but yes that’s a very good start and a much more viable menu approach.

There are a couple of little things such as you don’t need the prefixes for box-shadow and border-radius (and indeed the really old prefixes could do you more harm if placed in the wrong place). If you find code that has a prefix then take a look at the caniuse site first to see whether you need it or not.

Here is the entry for box-shadow. As you can see you would have to go a long way back to find a browser that needs the prefix.

Use this method for box-sizing as it is better and needs ot be directly applied to the pseudo elements :before and :after.

@OBXjuggler

Paul, eventually i need a drop down menu and hamburger. i dont know how to do that without using code i find i on line… copy and paste…

I’ll answer that later today and supply a few options. As usual with CSS/Html/js there is often more than one approach but generally the simpler the better.

Good start so far

[PaulOB]

@OBXjuggler

i need a drop down menu and hamburger. i dont know how to do that without using code i find i on line

I’ve forked your codepen and added a hamburger icon for small screen. I’ve added some js so that when you click the hamburger the menu will reveal itself. I placed the hamburger on the right because that’s where most people can click it easily rather than on the left where it becomes awkward to get your thumb across on a small device.

I started from the basis of doing no harm and used JS to add a class to the html element. If the html element has that class added we can be certain that the user has js enabled and we can use that class to initially hide the menu in our CSS. If we had just set the menu hidden to start with in CSS and a user has JS disabled then they get no navigation. Therefore always work from a place where everything is working and then add enhancements with JS.

When the hamburger menu is clicked the JS adds a class of ‘open’ to the header element. We can then use that class in the CSS to show the menu.

In the codepen above I have simply translated (transform:translateX(-100%)) the menu 100% above the top of the screen so you can’t see it. Obviously if this nav was in the footer we would have to hide it some other way. Try and avoid using display:none when hiding content such as the navigation because screen readers and bots still need to know where and what the links are.

When the class of .,open is added I change the translate from -100% to zero so that the menu slides down using the transition that was also added.

The dropdown menu is now position:absolute because on small screen we really want it to slide on top of the following content rather than pushing the whole page down which can be janky and cause a lot of page reflow. A High Z-index is used to control the stacking level and to ensure the menu stays on top of other elements in the page.

I noticed in your codepen you had a typo here:

.header {
    flex-direction: column;
    align-items: center;
      .header{
    width: 80%;
    margin: 0 auto;
    max-width: 1150px;
  }

You have a stray header class ( .header{) in the middle of the rule block. Always run your css and html through the w3c validators which I think I linked to earlier.

See if you can deconstruct the methods used and try and understand anything that looks strange as its only by trial and error that you learn a lot of this stuff. As a rule of thumb don’t blindly copy and paste anything you don’t understand unless it comes from a reliable source. You should at least have a little understanding of how the code is working even if you don’t understand the finer details yet.

Hope that makes sense but please ask about any details you don’t understand. You can ‘fork’ the codepen and use it for yourself and play around with it and try to break it etc.

[OBXjuggler]

first, thank you for your kind words!! i appreciate them very much! its encouraging

“Hope that makes sense but please ask about any details you don’t understand”

yes, please

i know almost no JS, is that ok for right now??

wow! i must say between my new code and your adjustment, i have a kick but navigation!!

i use vs code as my editor… when i open the code into the browser i see the nav, just how it should be.

when i tighten it up the hamburger is there! however, clicking on it, or clicking in Chrome dev, nothing happens…

however, on the embedded codepen on sitepoint the hamburger is flawless… the nav appears, the nav disappears

i copied and pasted the html, css and the js into vs code… though clicking on the hamburger does nothing… did i mess something by accident?

also, the lines of the hamburger are not even. the third, bottom line is lower, not symmetrical

and on my iPhone 8+ the hamburger is obscured by my text

what can we do?

do i owe you a $0.25 now?

keep in touch : )

[PaulOB]

@OBXjuggler

i copied and pasted the html, css and the js into vs code… though clicking on the hamburger does nothing… did i mess something by accident?

Where did you place the JS?

It needs to go in a script tag and placed just before the closing body html tag. If you placed the script in the head of the document then the page won’t exist when the js runs and will not find any elements to work with.

@OBXjuggler

also, the lines of the hamburger are not even. the third, bottom line is lower, not symmetrical

Looks ok to me by eye but I haven’t put it into my paint package to check. The math add up though. 3px top bar + 6px space + 3px bar + 6px space + 3px bar. = 21px the height of the button.

If I get a chance I’ll measure it on screen just to check. However by eye it looks ok to me.

@OBXjuggler

and on my iPhone 8+ the hamburger is obscured by my text

Yes I didn’t change the logic were using so you still need to reduce the font-size for the logo in the smaller media query. You could use the clamp method I mentioned right at the start to get a fluid text size but will take some trial and error to get right. Indeed I assumed you were going to be using an image as you had called it a logo. I’ve now added the clamp code .logo in my codepen.

This will make the text get smaller and hopefully avoid the hamburger. I also tweaked the hamburger code a little for better vertical centring on the navbar.

If you wanted to keep the logo text the same size then you would likely need to make it wrap to two lines on smaller screen. You could do this by wrapping a span around the last word and then setting the span to display:block on smaller screen media queries. These are all design issues that you need to make for yourself as no one but you knows how you want it to look

@OBXjuggler

do i owe you a $0.25 now?

Not as much as that

[OBXjuggler]

thanks for the advice.

yes, my JS was in the wrong place.

didnt work until i adjusted the tags that were not there

BINGO! my hamburger is working everywhere!

i love the transition btw

yes, i read up on clamp()… i get the basics

you wrote i will need trial and error to get the logo just right

do i tweak all 3 possibilities? 1 at a time?

any advice, please

actually i plan on keeping the text there (for now).

i saw your CSS has 2 different font-size properties with 2 different values in 1 selector

1 is the clamp()

should that be that way?

i made a media query for .logo… no go (pun not intended)

any other smart way to address the .logo? maybe clamp () is not my only option?

i will differ to your expertise

also, i see what you did with the media queries. you found a break point and threw in a well placed media query. i get it!

you wrote

"If you wanted to keep the logo text the same size then you would likely need to make it wrap to two lines on smaller screen. You could do this by wrapping a span around the last word and then setting the span to display:block on smaller screen media queries. These are all design issues that you need to make for yourself as no one but you knows how you want it to look "

ok, i dont get it… as of right now.

i do understand ultimately its up to my tastes

i want to try and figure this out without you, i will ask if i get lost

but first… is the last word you mean “Travelers”?

“If you wanted to keep the logo text the same size then you would likely need to make it wrap to two lines on smaller screen.” i guess that means i can change the logo text?
your $0.02 please

BTW

GOOD!

i cannot afford a $0.25 anyway!

[PaulOB]

@OBXjuggler

yes, i read up on clamp()… i get the basics

you wrote i will need trial and error to get the logo just right

do i tweak all 3 possibilities? 1 at a time?

The first and last of the clamp values are the minimim and maximum sizes so they need to work with your design if those values are ever reached. The middle value is the scaling factor based on the viewport width (vw) which means that the size will scale with the viewport width but will never be bigger or smaller than the min max values. However you have to have the appropriate vw value otherwise it may not be in the range that you specified and you will get either the max or min value instead. You can work it out mathematically but I find it easier with a bit of trial and error. Or better still open the devtools inspector and check the computed font-size of the element as you scale the window.

Or use the tool at the bottom of this article.

@OBXjuggler

actually i plan on keeping the text there (for now).

That’s fine but remember if you add more text then that will take up more room and you would therefore need to make some adjustments accordingly.

@OBXjuggler

i saw your CSS has 2 different font-size properties with 2 different values in 1 selector

Yes the clamp property is relatively new so support is only for modern browsers (basically anything apart from IE11) so i duplicated the font-size rule as a fallback. the first rule is the fallback in case the browser doesn’t understand the second rule.

In the screenshot I have inserted a property value I just made up and you can see from the devtools window that the browser ignores it and applies the correct version instead.

A more appropriate way would have been to use the @supports rule when you add cutting edge properties but IE11 is more or less dead in the water now anyway so I don’t give it more than a cursory glance.

@OBXjuggler

i made a media query for .logo… no go (pun not intended)

any other smart way to address the .logo? maybe clamp () is not my only option?

You could use a series of media queries for the logo and change the font-size of the logo accordingly so it all fits. However that is micro managing and not the best approach. You need an approach that doesn’t require much maintenance and works more simply. If you find you are writing media queries for everything then that’s the wrong approach to take. You either need to make the design more fluid or change to a design that works better.

Design and coding must work hand in hand to get the best result. It’s not always about appearance.

@OBXjuggler

but first… is the last word you mean “Travelers”?

Yes if you want to make text wrap at an appropriate point you can do this.

There are other was such as limiting the width the text occupies and then it wraps earlier In CSS there can often be 10 ways of doing the same thing…

[OBXjuggler]

it worked!!

my logo is now FAR more alethically pleasing on my small device

we put “Travelers” beneath and it looks great.

i tweaked some of the code, all is fine! crisis averted

though i do have a question… once i find a break point, how should i write the media query??

just min? ever max… ever both?

example please : )

also, no go on my parents iPad as far as the hamburger

it is there, but does nothing… did we discus this?? cannot remember : (

anyway, what needs to be done for tablets? a well placed media query? something i dont get?

also, you will really like what i did here!

how great is that!!

i really changed up the styling!..

you will notice the font, colors, width 100%

AND smart phone looks great!!!

no more of our obscuring problems!!

however, in chrome dev tools… as i shrink it… there are points where multi worded text obscures… but i keep on going and it resolves itself.

kindly pass on media queries for the break points… or lead me in the right direction? i simply dont know which to accommodate or simply ignore

ultimately is the best way to write a media query here… do i need both a min and max here? what would that look like?

again,

THANKKS!

[KristsKV]

Thanks for bringing up the subject, really useful read, we’ve been struggling with smartphone website appearance for a while. They work a bit differently for every languange and when there is less content.

[PaulOB]

@OBXjuggler

though i do have a question… once i find a break point, how should i write the media query??

just min? ever max… ever both?

I have explained in the above posts a few times but to recap:

Generally you will use one approach or the other and stick to it.
e.g.

/* styles for everyone go here */
html,body{margin:0;padding:0;}
.wrap{background:red}
and so on etc..
etc..

/* now modify the global styles depending on the breakpoint needed for the design */
/* when using max-width media queries start large and go smaller. It would be vice versa for min-width media queries*/
@media screen and (max-width:1020px){
body{background:blue}
}
@media screen and (max-width:820px){
body{background:blue}
}
@media screen and (max-width:620px){
body{background:yellow}
}

There are odd times when you may want code to be separate from each other rather than overwriting previous code and then you can use both min and max as I did for the hamburger menu.

@OBXjuggler

also, no go on my parents iPad as far as the hamburger

What do you mean by no go exactly? It doesn’t show, or it doesn’t toggle, or the menu doesn’t show? The code I gave you will work fine on any modern device.

What is the url of the page you are testing?

Has the cache been cleared?

@OBXjuggler

anyway, what needs to be done for tablets? a well placed media query? something i dont get?

Obviously you don’t get it because you mentioned the device word again.

I said forget about devices and that includes tablets. Some phones are now bigger than older tablets and some tablets are bigger than laptops and some laptops are bigger than desktops (as I mentioned before). There are no fixed device sizes anymore.

Please don’t mention devices again.

There is no reason to refer to any device as long as you follow the simple process of opening and closing your browser window slowly every time you code a new section. This takes approximately 5 seconds and will tell you if your device works across all devices (disregarding device bugs or specific device components of course).

I can tell you are not following this advice when a quick 5 second check of your codepen reveals this:

The hamburger is overlapping the text at around 535px as shown in the screenshot. You should have spotted this immediately. I gave you code to reduce the text size in a few different ways now so this should never have happened.

While learning you need to open and close your browser window every time you code a new section. Start at the max-width of the browser and take it down to around 320px wide (the smallest you need to worry about (apart from watches which we will ignore for now)). You can do the same for the height of the browser but height is rarely an issue as people are used to scrolling.

@OBXjuggler

however, in chrome dev tools… as i shrink it… there are points where multi worded text obscures… but i keep on going and it resolves itself.

Ah ok so you did see it. Why didn’t you throw in a media query and fix it. We want no overlap at any size. You just broke a device or a desktop with its window open at that size. There’s no point checking if you don’t fix it as you go.

My font-size clamp solved that issue without media queries. Or you can simply knock the font-size down a little bit in a media query at around 600px or in a previous rule. Or indeed if you want the larger text force it to wrap as in the code I already gave you. I have given you a multitude of options all of which will work so its up to you to chose the one that best fits in with how you envisage your design to look.

To be honest I would have just set a font-size (or two) that works better across a range. If I look at your design on the smallest device (iphone 4) your logo almost fills the whole screen and looks very bad.

You need a smaller font for headings on smaller screen widths (but note body text should not be scaled smaller as body text is harder to read on a small device than it is on screen so I tend to make sure readable paragraphs are at least 1rem (16px) on smaller screens).

This is how I would do it.

You’ve made a good start but you must be diligent and continually monitor the design at various widths while also validating the html and css every time you code a small section. Once you are more experienced you can do it less often but as a beginner it is important to keep on top of everything.

I couldn’t find the animated gif I was looking for that shows a little man continually opening and closing a browser window (as such is the life of a web designer these days) but I came across these gifs that are quite informative in explaining RWD (Responsive Web Design).