Media Query for iPad Air

HTML & CSS
21

I would start by removing the link to the device specific styles.

Then I would change #wrapper as follows and rethink how I want the page to flow as the viewport becomes narrower.

#wrapper {
    border: 1px solid red;
    margin: 0 auto;
/*    min-width: 1250px;  /* DELETE Me */
/*    width: 1350px;  /* DELETE Me */
    max-width:1350px;  /* ADD Me */
}

 
The <header> is a block element. Block elements extend to the full width of the available space by default. I would delete {width:100%} from any blocks that have {width:100%} assigned unnecessarily.

Fixed heights are usually poor design as they do not change height as their contents change. You my want to specify a min-height rather than a fixed height, but in this case, I’d start with no height assigned.

header {
    border: solid 3px gray;
/*    width: 100%;  /* DELETE Me */
/*    min-height: 270px;  /* changed from {height:...} *//* DELETE Me */
}
22

As of right now window can get only little bit smaller before all my elements become not visible (due to smaller window). At width 1370 I am going to have to start changing things. Thats why I am confused. As far as I see somewhere there should break point and what should I do:

start making menus icon and fonts smaller?
move them to different places?

Sorry for so many questions ):

23

I see your point, but it seems odd to have designed a web page that will only work at a width above 1370px in the first place. My screen res is 1366 x 768 so I will always get a horizontal scrollbar.

I’m not sure anyone can tell you how to design your home page. You need to consider what you want your website to look to people with more modest sized monitors. Think about people with a screen size of 1200px, 1024px and smaller.

24

that’s what I am confused about. If I make it for 1200px all elements would have to be smaller. My logo image would need to be made smaller (in Photoshop), menu items would need to be smaller, images in slider would need to be made smaller

25

The point of making the site responsive isn’t to somehow scale it down so the exact same layout fits on every device, but to adjust the layout slightly at different widths so that the content still fits in a usable fashion.

Unfortunately, your site seems to be built almost entirely of images, which is not good practice for any size of screen. I suggest a rewrite in HTML/CSS is long overdue.

26

CSS can resize images to make them responsive.

We are not saying make it for 1200px, but make it for any size. From 320px upward is acceptable.

1 Like
27

Can you explain how would I make one element of my site responsive…say for example top left part where is say welcome…

28

You can’t really take the web page piece by piece and make it responsive. You have to look at the page as a whole.

29

yes i know…imagine that my all my web site contains is the header…how would i work on that

30

The first step is to do as Ron said in post #21.
That will make the main wrapper responsive. After that, you will have to work on each element at a time.

1 Like
31

As I said before, that’s really not going to be possible while your site consists almost entirely of images. You need to rebuild it correctly with actual text and the proper use of images.

2 Likes
33

Stribor45,

Start with a fluid layout. That is what my initial changes to your outer containers creates. Avoid fixed widths and heights.

Responsiveness comes into play when one uses CSS media queries or flexbox to change parts of the layout to accommodate smaller width devices.

I started playing with your page but I cannot envision how you might want your images to behave; only you can do that. Give me some time and I will demonstrate ways of making some of the content on your page fluid and/or responsive, but it will be up to you to apply those techniques and others to create a full-range responsive layout. As @TechnoBear said, a page full of images without text is awkward to “rearrange”, and no one else can do it for you (we do not know what looks good to you).

There are lots of borders on you page. Are those for testing purposes or are they supposed to be part of your design?

It’s a visually “busy” page. Too busy for my taste (that’s my way of apologizing in case my examples are ugly).

Don’t wait up and don’t expect much… this will take some time.

3 Likes
34

I assumed those borders so be for visualising the blocks while setting up layout.

It’s the sort of layout I would probably try flex-box on. It may need a lot of queries otherwise.

2 Likes
35

borders are just for me to see where elements are positioned…

36

Shouldn’t this media query

@media only screen and (min-width: 1160px) {
     body {
        background: yellow;
     }
}

change background color to yellow once I shrink browser window to 1160px

37

You are not the only nor the first to be a bit confused about “min”" and “max”

eg.

img { max-width

means “can be smaller, but no bigger than this”

@media max-width

means “if smaller or this, apply this CSS”

img { min-width

means “can be larger, but no smaller than this”

@media min-width

means “if larger or this, apply this CSS”

4 Likes
38

Stribor45,

Attached please find a .zip file containing my demo version of your web page including CSS, images, JS, and font files.

(The rest of this message is repeated at the top of the HTML page.)

  • 300px min width. Including several idiosyncratic tweaks.
  • Everything does not change at once. Elements change when needed to maintain the flow of the page (more or less).
  • This is not an exact replica of your page, but it’s close enough to be useful for demonstrating ways that CSS can be used to make a layout fluid and responsive.
  • To study this layout, drag the edge of your browser from about 1400px or wider through 300px slowly and watch the elements adjust. There are a lot of movement to be seen including little details… the border around the slider does not overflow the bottom borders. There are plenty of TEST Outlines on the page, if you wish to enable any.
  • I rewrote much of the code. Changed most IDs to classes. The only ID on the page belongs to the slider because the ID is used by JavaScript.
  • If you are lucky, @SamA74 or @coothead will create a version using flexbox. The CSS will be seem sparce compared to this.
  • Tested in Firefox and Chrome on a PC. NOT tested in IE anything.
  • There may be stray comments or code on the page. If something looks out of place, don’t hesitate to ask. It just may be out of place.
  • Your “Hire Me” tag symbol on the header has an XHTML closing slash. Definitely out of place.

Hope this is useful.

Stribor45.zip (1.3 MB)

2 Likes
39

Thanks ronpat. I will study this and adjust my site. I will show you how I made out. Much appreciated

1 Like
40

ronpat I am looking at your code. Particularly selector .mysite. At around 980px window size this elements stretches across the screen. How does this happen?

41

At 1000px it gets the properties display: block and width: auto.
That reverts to the default behaviour of a block element, full width.

2 Likes