Please help with my layout

1

So I was practicing with media queries and making a responsive layout. When opening the index.html on my local machine it looks great imo. When I uploaded it to github and copy/paste it to codepen one block level element wont show itself. Its suppose to be floating on the right of the #mainArticle but its empty. It works good on my local machine. website uploaded to git. and heres a Link to the code

Edit: well seems to be working for everyone else except me. how it looks on my laptop
Edit: Wow figured out what was wrong with it thanks to Stack Over Flow with an id of “#ads” it was getting blocked by adblock. This explains it all, please learn from my mistake not sure what the take away is but dont be like me haha

Screenshot (80).png1366Ă—768 165 KB

2

Is this not what it should look like?

Screen Shot 2016-08-26 at 3.56.50 PM.png1678Ă—834 296 KB

1 Like
3

yes thank you its showing different on my laptop and only mine for some reason heres how it looks on mine

4

Wild. What’s your screen width?

Also, if you drag and drop an image into the text box, you can include it in your forum post as I did above.

5

** EDIT: actually looking at your code I can see you are using media queries. Changing those settings should work for you.

You have two answers here. One, you can use media queries to adjust your layout based on the screen width of the viewing device: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Two (and this is easy mode) you can use Bootstrap. Some people turn their nose up at Bootstrap, but I still like it. http://getbootstrap.com/

6

it works fine when I open it up locally on my browser. It just looks like that when I go to the website using the link. So i think the media queries are fine since they do work locally im thinking it has to do something with github since I was having trouble uploading it had to do it a couple of times

7

1366px but it works fine when I open up index.html locally it just looks like that when I use github’s link.
edit: also it works fine on firefox and chrome on android just not chrome on my laptop

8

It’s probably not Github if it works for everyone else. Try clearing you cache and cookies, and then try disabling your browser extensions.

9

hahaha wow someone at SOF pointed out with the id “ads” it would gett blocked by adblocker. I feel dumb I tried all day to fix this.

2 Likes
10

:joy: that’s a first for me! At least you got it, and we’ve all learned a lesson about what to not name our ids.

1 Like