+ 4
Please help!
Can someone please tell me why my code isnโt working? https://code.sololearn.com/WK1wTa3k4r70/?ref=app Thanks.
21 Answers
+ 9
The first thing you do when you something is wrong is verify the obvious, in this case it is the class name.
You used class="logo", but for some reason in CSS you typed .Logo, and this also happens for class="container". Fix it and it should work fine.
Here is the code, with some other modification. this is not the right way to do things tho, you should check the link I provided in one of your previous posts.
https://code.sololearn.com/WYEzs2YS4TJd/?ref=app
+ 5
Classnames are written with lowercase in HTML, but in CSS they are written Capitalized, so change to lowercase
+ 5
Ruth De Leon usually on a mobile you need to make a responsive website. Again, check the video I sent to learn how to make a responsive navigation bar, because most websites now use that feature instead of writing two different versions.
+ 5
Ruth De Leon
Try out this
CSS :
.logo {
text-align: center;
color: #f27986;
}
.container {
width: 100%;
height: 100%;
background: #000000;
}
.menu ul {
display: flex;
margin: 5%;
}
.menu ul li {
list-style: none;
padding: 0px 5px;
color: #ffffff;
cursor: pointer;
}
https://code.sololearn.com/WNxE49V1PCK0/?ref=app
+ 3
It is not <ul>text</ul> and so on. You have to write it like this:
<ul>
<li>option1</li>
<li>option2</li>
</ul>
+ 3
Class "logo", not "Logo"
+ 3
Aymane Boukrouh [INACTIVE] Thanks I have fixed it. But it looks different on desktop. Do you know how I can fix the look on desktop?
+ 3
The <link> tag for CSS isn't needed in <head> tag
+ 2
If you want another look in desktop, you can write your new styles in @media screen and (min-width: SCREEN MINIMAL WIDTH){}
+ 2
Replace ref="stylesheet" with rel="stylesheet"
+ 1
Ruth De Leon can you elaborate what's problem in it??
+ 1
Aymane Boukrouh [INACTIVE] I still dont get what I did wrong. I canโt use class Logo in css?
+ 1
Davit Arakelyan it worked! Thanks!!! God bless you a lot! ๐๐๐
+ 1
Thank
+ 1
I work this code for you please see it
+ 1
/* Created by Ruth De Leon */
.logo {
text-align: center;
color: #f27986;
}
.container {
width: 100%;
height: 100%;
background: #000000;
}
.menu ul {
display: inline-flex;
margin: 5%;
margin-left:-50px;
}
ul li {
list-style: none;
padding: 20%;
margin:5px;
color: #ffffff;
cursor: pointer;
}
0
I did a small change in css
.logo {
text-align: center;
color: #f27986;
}
.container {
width: 100%;
height: 100%;
background: #000000;
}
.menu ul {
display: inline-flex;
margin-right: 5%;
}
.menu ul li {
list-style: none;
padding: 0px 20%;
color: #ffffff;
cursor: pointer;
margin-right:15%;
}
0
The first thing you do when you something is wrong is verify the obvious, in this case it is the class name.
You used class="logo", but for some reason in CSS you typed .Logo, and this also happens for class="container". Fix it and it should work fine.
Here is the code, with some other modification. this is not the right way to do things tho, you should check the link I provided in one of your previous posts.
https://code.sololearn.com/WYEzs2YS4TJd/?ref=app
0
๐๐๐๐๏ธ๐ถ๐ถ
0
Remove the margins and paddings then add justify-content like this:
.menu ul {
display: flex;
justify-content: space-between;
}