Working with media queries

Projects Personal Projects
#1

kindly see

www.foralthetime.com (yes, i know its sloppy right now… under construction)
i dont know how helpful the HTML is, 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

just for future use, how do i write a media query to size the images in the slide show? per tablet? per small device?

any and all help is appreciated!

BTW

i am not going to take this code, turn around and use it because its what i need.

rather i will study your provided code so i actually understand it!

MANY THANKS!!

in this situation i am learning by doing and asking for help!

that’s the best way, right?

T

#2

Indeed!

I think you should be able to scale images according simply using width and height attributes for the images you want scaled. Then you can put these in the appropriate media queries.

Your media query sizes seem alright-did you research these? That would be a good way to find out more. Also, you can have more than one CSS selector in each query. I notice you have these two:

@media only screen and (orientation: landscape){
    .text {
      font-size: 1rem;
    }
    }
    @media only screen and (orientation: landscape) {
    #banner h1{
      height: 3rem;
    }
  }

Where the media queries are the same-you could change it to be in one query.

I hope this helps!

1 Like
#3

many thanks!

that does help… less code!

again, trouble writing media queries for small device landscape

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

specifically .banner h1 and .text

#4

I assume you would use a query similar to what you are doing-using a combination of orientation and min-width or max-width.

@media only screen and (orientation: landscape) and (max-width: /*the max width of a small device*/
#5

again, thanks!

media queries are fine on small device portrait

cannot get media queries on small device landscape

see my css

where is my trouble?

: )

#6

In what way does it not work? Since you’re using rems, the sizing might be responsive enough-and therefore changing the browser width/orientation won’t do too much.

#7

when i write it does not work i mean the SAME styling is applied to both landscape and initial code, code with out any media queries

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

a class is the same class on landscape as my initial code… zero distinction

i am after the code that will stylize landscape on small devices as tablets… and make a hamburger and drop down

no brain problem there! ALL i need is the right media query to make that hamburger and drop down

if its helpful, 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

i hope i am clear! do not intend to confuse you : )

if it seals the deal, i will give you a $0.25!

#8

I’m sorry, but I don’t quite understand what you’re saying; could you summarise your main question, please?

#9

sure,

please see my site, www.forallthetime.com, at desktop code…

no issue

i wrote a successful media query for small device :

@media only screen and (min-width: 400px){
.text {
font-size: 1rem;
}
}
@media only screen and (min-width: 400px){
#banner h1{
font-size: 3rem;
}

this is small device portrait, i am happy here

i am after the appropriate code to take that desktop code and make it responsive for landscape

to line up the slide show, adjust my nav and hamburger

compare www.forallthetime.com portrait vs landscape… you will see my problem

i hope this is more clear!

seriously, i do appreciate your time and advice

T

#10

Can i be any more help?

#11

Yes-could I see some screenshots from the various devices, please?

#12

image
image900×1600 308 KB

image
image2208×1242 457 KB

image
image2208×1242 641 KB

image
image2208×1242 377 KB

image
image2208×1242 385 KB

the first image is my responsive portrait. you can see all fits fine… i have a drop down and hamburger. i am happy here

next is my banner in landscape BUT it has the desktop code… i need to make this responsive for landscape

next is a landscape image (slide show)… i need that responsive landscape… for example the green text is big compared to portrait

next is another example of desktop code needed to be made responsive landscape

final is my banner in landscape, again its styled desktop… you can see no drop down and no hamburger… it simply doesn’t fit nice : (

long story short:

i need the media queries (code) to style the above to landscape orientation

yes, i tried EVEYTHING i could think of!

i hope this helps!

let me know!

feel free to see www.forallthetime.com if it helps!

again, i thank you!!

#13

still having trouble

dont get it

see https://codepen.io/OBXJuggler/pen/jOrgqdw

everything is great BUT the landscape

full CSS

i know my code is a bit sloppy, planning to correct that

what am i doing wrong?

#14

For two of your media queries, they are structured like this:

@media screen and (max-width:/*something*/)

Is there something missing from that?

#15

i am not sure what the syntax is… maybe thats my problem

i re-searched and followed leads…

i tried a min-width without a max-width

i tried breakpoints for different devices… from different sources

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

thanks for sticking with me!!!

please pass on your ideas : )

#16

I mean a media query should contain the word only:

@media only screen and (max-width:/*something*/){
/*code*/
}

Try including orientation into is as well.