- This topic is empty.
-
AuthorPosts
-
June 10, 2015 at 2:24 am #203519MatiasParticipant
Hi guys, my trouble always is this. I make a website nice and beauty but when I view my site on another PC with another resolution all things are in random places.
How can I make this part of my website responsive and all the other part which I making right now.
http://codepen.io/anon/pen/LVLppy
The site on my pc seems like this:
Thanks guys.
June 10, 2015 at 3:26 am #203526Paulie_DMemberYou need to start by validating your code.
You seem to be missing some value px statements
.Menu ul { list-style:none; float:right; margin-top:45px; margin-right:295; /* here */ margin-left:295; /* and here */ }
…but other than that it’s hard to understand what the actual issue is.
June 10, 2015 at 1:52 pm #203554MatiasParticipantThanks for the replies guys.
If I understand good is incorrect use margins for place things on a “x” place of the site.
June 11, 2015 at 10:46 am #203588prtParticipantHi Matias,
A couple of points not yet mentioned. To make a truly responsive design you should use % whenever possible. For example on your img tag:
img {width:90%;}
Also, you should include this line in the head of each page:
<meta name=viewport content=”width=device-width, initial-scale=1″>
Finally, you’ll need to use media queries to fix the break points. That is, using margins can be ok to position elements, but you’ll probably have to specifically code more media queries to fix when they break. Regardless, you’ll still find screen resolutions where your design doesn’t look right, and media queries fix that. Here’s an example:
@media screen and (max-width:960px){
img {width:20%;}
}I hope this helps!
June 11, 2015 at 11:01 am #203591Ryan YurkaninParticipantHi Matias!
I’m so glad you are interested in Responsive Design. It really does help to make the web a better place.
Responsive Design is really a state of mind, and you want to be thinking about it right at the beginning of your project.
May I suggest this video? https://www.udacity.com/course/responsive-web-design-fundamentals–ud893
This video is what jump started me with Responsive Design. I hope it does the same for you!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.