Problem with page size - making page responsive

HTML & CSS
1

I am trying to modify an existing website to make it responsive to changes in browser size. For some reason I’m completely stuck with the issue of page size not matching browser window size from the point specified in the media query.

Would anyone be willing to troubleshoot my CSS? I have created a test file by stripping down one of my pages to its bare bones, and placing the CSS style info in the header.

Thanks in advance.

EDIT: Just discovered that as a new user I can’t upload the file. :confused:

2

You can provide a link, or if you navigate and read a few threads you’ll quickly become TL 1 and be able to upload a file.

3

I’ve put the html file in my dropbox. Here’s the link:
https://dl.dropboxusercontent.com/u/8381490/test.html

Thanks!

4

Link isn’t working for me. Server is down.

5

Works for me, but just so everyone can see it
test.html (4.8 KB)

6

What exactly are you trying to achieve? If you want to make it responsive from here, just make #page to have a percetnage width to make it change based on screen size. Make a max-width if you don’t want it to get huge.

When you get to certain low screen widths you can set a media query to reconfigure parts of the page to make it more suitable for small sizes (e.g. instead of a 2 column layout for small sizes, make those columns vertically on top of each other etc.

7

Do you notice that, as you size the browser window down beyond the size of the page, the grey table width suddenly jumps out beyond the page boundary and from there on in I’m losing the white right hand page margin? That’s what I’m trying to fix.

8

You could change this 100% width tto 96% if I understand you right.

@media screen and (max-width: 939px)
#page {width:96%;}
9

Hi,

You can’t add padding to a 100% width unless you are using the border-box model. All you need to do is set the width to auto if you want some padding.

@media screen and (max-width: 939px) {
	body {
	/*width: 100%; not needed*/
                }
	#page {
		width:auto;
		padding-left: 2%;
		padding-right: 2%;
	}
	.q {
		clear:both;
	}
}

There’s no need to specify the body at 100% width because its width is auto by default and will automatically fill the viewport horizontally.

As I suspected in your other thread your button styles do not work properly and the area covered by the anchor does not match the highlight. You need the code I gave you before. Also note that there is not an :active state for a div.

.button{
	margin:15px;	
}
.button a {
	display:block;
	text-align: center;
	padding: 10px 20px 10px 20px;
	background: #ff7700;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	box-shadow: 0px 2px 1px 1px #333333;
}
.button a:hover{background: #ff9933;}
.button a:active,.button a:focus{
	background: #ee6633;
}

Html:

<div class="button"><a href="#">Contact me NOW to find out how I can help you become a better guitar player!</a></div>
10

Awesome! Thank you so much! :slight_smile:

11

i had this problem myself. thanks for the explanation!