Alignment at viewport

HTML & CSS
1

Hi I have some text in my carousel when change the
viewport size it does not align to the left with the other
content. How can I have it so the text aligns nicely with
the nav? SITE

2

What you’ve linked to doesn’t seem to match the image above, so I’m a bit confused.

3

oh, you need to change the viewport
of the browser to see that happening.

4

I did, and still didn’t see what you are describing—made it very wide and very narrow. No Home menu link etc.

5

You Dont Get this?

1296Ă—1039 153 KB

that about 1200px.

6

O wow, I see. I had to make my browser even wider to see that layout. It only just fits on y laptop. It’s unusual to have a mobile menu kick in at 1200px width. So could you clarify what alignment you are looking for? Do you want the slider text left aligned with the left edge of the Home link?

7

Yeah Exactly

8

Try something like this:

@media screen and (min-width:1200px){
.carousel-caption{
left:0!important;
right:0!important;
max-width:1200px;
margin:auto;
}
#menu{margin:0 auto;padding:0;max-width:1200px;}
}
2 Likes
9

Thanks for that.

Just a general question on queries…is it best to use min-width or
max width or is just a preference?

10

AFAIK, yes, Some prefer to design mobile-size first and tweak as the view-port gets bigger, some prefer to design desktop-size first and tweak as the view-port gets smaller.

I don’t know, and a lot would depend on the designers skill, but I’m guessing that as the style gets further away from the starting point keeping things looking good would get harder.

If that guess is true, considerations would be

  • what the designer feels most comfortable with using as the starting point (preference)
  • what the primary target audience is (demand)
1 Like
11

Yeah this is a good point
.

12

I generally use max-width and go smaller and smaller. I used min-width in your example because the change only needed applying to larger than 1200px.

3 Likes
13

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