Help required in making site responsive

HTML & CSS
1

Hello. So I have this website for my final school project. The thing is I have to make it now responsive , at least for smaller monitors . I have a solution by shrinking the content with media queries.Can you guys give me some advice?

ul {
	margin: 56px;
	padding: 8px;
	list-style: none;
	text-align: center;
}
ul li {
	float: center;
	width: 210px;
	height: 70px;
	background-color: #e62e00;
	opacity: .8;
	line-height: 70px;
	text-align: center;
	font-size: 30px;
	display: inline-block;
	margin-right: -5px;
}
ul li a {
	text-decoration: none;
	color: white;
	display: block;
	font-family: Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif;

}
ul li a:hover {
	background-color: green;
}

/*Fixare background*/
body {
	background: url(Images/6.jpg) top right no-repeat;
	
	background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

	
	
}
div {
	background-color: rgba(5,4,2,0.8);
	width: 1000px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 40px;
	padding-top: 60;
	color: #ff9933;
	font-size: 16pt;
	margin-top: 250px;
	text-align: justify;
	font: Times New Roman;
	border-radius: 25px;
}
p {
	text-indent: 50px;
}
#talos {
	float: left;
}
.evolutie {
	margin-left: 40px;
	font-size: 16pt
}
img {
	display: block;
	margin-left: auto;
	margin-right: auto
}
2

There is not much to go on with just the css. It would help to see the html too.
A few of things that stand out with a quick glance.

width: 1000px;

Avoid fixed widths like this, that’s never going to be responsive. Use max-width: 1000px instead to make it “fluid”.

height: 70px;

It’s good to avoid setting heights too. Let content define the height and stay fluid.

font-size: 30px;

Use relative units for font size, like em or rem as this will allow resizing.

line-height: 70px;

Be unitless defining line height, that will keep it relative to font size.

float: center;

There is no center value for float, only left, right or none.

4

Here is the html

1920×1080 1.98 MB

<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inteligența artificială</title>
<link rel="stylesheet" href="Evolutie.css">
</head>
<body>
<ul> //the menu
  <li ><a href="index.html">Home</a></li>
  <li><a href="Concept.html">Concept</a></li>
  <li><a href="Evolutie.html">Evoluție</a></li>
  <li><a href="Aplicatii.html">Aplicații</a></li>
  <li><a href="Etica.html">Etica</a></li>
  <li><a href="astazi.html">Astăzi</a></li>
</ul> //the trasnparent section
<div size:80px>//
5

Two comments on your HTML:

<div size:80px> is not valid. There is no “size” attribute, and you should set the dimensions in CSS.

Also, // is not the correct way to mark a comment in HTML. Use <!-- comment goes here --> instead.

1 Like
6

Here is an example…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>media query example</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
ul {
    width: 100%;
    max-width: 62.5em;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    overflow: hidden;
 }
ul li {
    float: left;
    width: 16.666%;
 }
ul li a {
    display: block;
    line-height: 2.2em;
    background-color: rgba(230, 46, 0, 0.8);
    font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
    font-size: 2em;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
ul li a:hover {
    background-color: rgba(0, 128, 0, 0.8);
 }
@media screen and ( max-width: 55em ) {
ul li {
    width: 33.333%;
  }
 }
@media screen and ( max-width: 27.5em ) {
ul li {
    width: 50%;
  }
 }
@media screen and ( max-width: 19em ) {
ul li {
    width: 100%;
  }
 }
</style>
</head>
<body> 
<ul> 
  <li><a href="index.html">Home</a></li>
  <li><a href="Concept.html">Concept</a></li>
  <li><a href="Evolutie.html">Evoluție</a></li>
  <li><a href="Aplicatii.html">Aplicații</a></li>
  <li><a href="Etica.html">Etica</a></li>
  <li><a href="astazi.html">Astăzi</a></li>
</ul> 
</body>
</html>

coothead

1 Like
7

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