Description
Image
How my website looks right now (No margins on sides)
How it should look
I'm not sure what is causing this issue, I really have no clue.
#moto {
font-size: 48px;
font-weight: 300;
color: #484848;
margin: 60px 0;
letter-spacing: 0.8px;
}
#moto span {
color: #FF5A5F !important;
font-weight: 700;
}
.row {
position: relative;
max-height: 970px;
height: auto;
margin: 0 auto;
background-color: yellow;
}
#media all and (max-width: 1000px) {
.row {
padding: 0 15px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
}
<!-- MOTO-->
<div class="row">
<h1 id="moto"><span>Where to?</span> Start your next trip with<br /> Great Danes.</h1>
</div>
idk what else to say, idk whats wrong or where to start, it was working until this point
https://youtu.be/k4q5kM90zvY?t=207
THIS is the YT video I am following, pls tell me how to work it like him
by looking at your code and the pictures you posted, I believe you would like the .row element to be centered and aligned, like in the second picture. For that, edit your .row element in your css stylesheet. Try this, I believe that is what you are looking for:
#moto {
font-size: 18px;
font-weight: 300;
color: #484848;
margin: 60px 0;
padding-top:5px;
padding-bottom:5px;
letter-spacing: 0.8px;
}
#moto span {
color: #FF5A5F !important;
font-weight: 700;
}
.row{
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: yellow;
}
#media all and (max-width: 1000px) {
.row {
padding: 0 15px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
}
If you are just starting out with HTML and CSS, check out Bootstrap, it's a framework that will ease your whole work process with HTML and CSS, it's very easy and cool to use, also it's the world's most used framework. Check it out here: https://getbootstrap.com/docs/5.1/getting-started/introduction/
Related
I am working on a Sass project and everything worked properly, but media queries are not working.
I tried adding them at the bottom of the document, adding in the chain of labels, having more specificity than the normal chain and nothing is working. Do you know what the problem could it be?
Here is what I did:
Breakpoints:
$mobile-breakpoint: 600px;
$laptop-breakpoint: 922px;
In this case is applying the media query even when the width is less than 922px:
img{
height: 5vw;
margin: 3vh 4vh 4.6vh 3vh;
#media(min-width: $laptop-breakpoint){
height: 4vw;
}
}
The code after being coverted to CSS:
.main-header .header-logo-search a img {
height: 5vw;
margin: 3vh 4vh 4.6vh 3vh;
}
#media (min-width: 922px) {
.main-header .header-logo-search a img {
height: 4vw;
}
}
In this case, it does not apply the media query:
input{
#include search();
width: 30vw;
box-sizing: border-box;
padding: 0 1.5vw;
font-size: 1.2rem;
background-color: $snow;
border-radius: 5px 0 0 5px;
#media(max-width: 600px){
display: none;
}
The code after being coverted to CSS:
.main-header .header-logo-search form input {
height: 3.5rem;
line-height: 3.5rem;
border: none;
margin: auto 0;
width: 30vw;
box-sizing: border-box;
padding: 0 1.5vw;
font-size: 1.2rem;
background-color: #FFF9FB;
border-radius: 5px 0 0 5px;
}
#media (max-width: 600px) {
.main-header .header-logo-search form input {
display: none;
}
}
Thanks in advance
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Without a viewport meta tag, your site will be rendered into the device's default virtual viewport.
this might be a really stupid question, but I recently started getting into web development again as a hobby, and I am trying to create a simple website to remember what I knew.
Unfortunately, I ran into a roadblock: I want a navigation bar that spans 100% of the page, but no matter what I try, there are still tiny margins to each side, like this:
The website
Right now, the relevant CSS looks like this:
body {
background-color: beige;
}
.navbar {
background-color: black;
overflow: hidden;
margin: 0 0 1em 0;
float: left;
width: 100%;
display: inline-block;
}
.navbar a {
background-color: #dddddd;
color: black;
float: left;
font-size: 24px;
padding: 16px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #777777;
color: white;
}
.navbar a.active {
background-color: coral;
color: white;
}
Andrew provided a nice answer for you but to not run into this kind of problem again I suggest always adding this to your main .css file.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
Otherwise just add this to the html and body elements.
The gaps are most probably from your parent body element. Add the following to your CSS to remove those gaps:
body {
background-color: beige;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
I am new to HTML and CSS so I am doing a online course, I don't understand what went wrong here and I cannot find it in my course.
My footer is smaller then it used to, it was as big as my header and I want it as big as my header. When I added all the .post code, it went wrong. When I edit my .post max-width my footer width is also adjusted. Please help me :)
.container {
max-width: 1000px;
margin: 0 auto;
}
#footer {
background-color: #2f2f2f;
padding: 50px 0;
}
.column {
min-width: 300px;
display: inline-block;
vertical-align: top;
}
#footer h4 {
color: white;
text-transform: uppercase;
letter-spacing: 0.1em
}
#footer p {
color: white;
.post {
max-width: 1000px;
margin: 0 auto;
padding: 60px 0;
I'd like to create simple responsive website containing a showcase of pictures. By myself, but if there's a template, no problem. But I want to learn it anyway.
Requirements:
images with one width no matter the browser width
images always in the middle of the page (0 auto)
number of columns - images changing with the browser width
no height limitation of the image. only fixed width (+ keep aspect ratio).
perfect example: www.kristianhammerstad.com - try to resize the window, I'd like to achieve exactly this. Works also on mobile browser (shows image after image)
I'd prefer without JS, only media queries - possible?
Here's what I have so far:
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }
body { font: normal 14px Helvetica, Arial, sans-serif; line-height: 30px; color: #333; }
.left { float: left; }
.right { float: right; }
.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
hr {
margin: 0;
border: 0;
width: auto;
border-top: 1px solid #aaaaaa;
opacity: .25;
margin: 0 auto;
}
h1 {
letter-spacing: 2px;
font-weight: 300;
text-align: center;
font-size: 2em;
line-height: 1.3em;
color: #333;
}
h2 {
letter-spacing: 1px;
font-weight: 300;
text-align: center;
font-size: 1em;
margin-bottom: 60px;
color: #666;
text-transform: uppercase;
}
/* ---------------------------------------------------------- */
.wrapper {
width: 950px; margin: 0 auto;
}
#name {
margin-top: 50px;
}
/* ---------------------------------------------------------- */
#works {
margin-top: 50px;
}
#works h2 {
font-family: Helvetica, Arial, sans-serif;
letter-spacing: 1px;
font-weight: 300;
text-align: left;
font-size: 1.3em;
margin-bottom: 10px;
color: #666;
text-transform: none;
}
#work-one {
display: block;
width: 460px;
height: 500px;
margin-right: 30px;
margin-bottom: 30px;
}
#work-two {
display: block;
width: 460px;
height: 300px;
}
#work-three {
display: block;
width: 460px;
height: 700px;
margin-bottom: 30px;
}
#work-four {
display: block;
width: 460px;
height: 200px;
}
/* ---------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 1024px) {
/* I am not sure about break points */
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
/* I am not sure about content here */
}
<div class="wrapper">
<div id="name">
<h1>IMAGES</h1>
<h2>showcase</h2>
</div>
<div id="works">
<div class="left">
<a id="work-one" href="#"><img src="http://placehold.it/460x500?text=Placeholder" ></a>
<a id="work-two" href="#"><img src="http://placehold.it/460x300?text=Placeholder" ></a>
</div>
<div class="right">
<a id="work-three" href="#"><img src="http://placehold.it/460x700?text=Placeholder" ></a>
<a id="work-four" href="#"><img src="http://placehold.it/460x200?text=Placeholder" ></a>
</div>
</div><div class="clearfix"></div>
</div>
First of all it would recommend using a grid system. One common known and used would be bootstrap.
With it you can easily set your wanted layout.
Second, to achieve this "repositioning" effect, you would need a JS library called masonry. It hooks itself in the resize event as well as initially on initialization of the dom.
There it calculates the width of the container wrapping all images and the width of the images, calculates the new positions using complex algorithms, and reposition them using the animation effect you see.
Maybe this tutorial (with source) will help you further: http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/
I have a icon font and I need to center my letter in a circle.
I copy my code in this jdfiddle
This is css code
.icon:before {
margin: 0 auto;
font-size: 57px;
}
.icon h2 { text-align: center; }
.circle.icon:before {
border-radius: 50%;
color: #FFFFFF;
width: 65px;
height: 65px;
display: block;
text-align: center;
line-height: 1.2em !important;
}
.icon.mobile:before{ content: 'F'; }
.mobileC { color: #8CC63E; }
.icon.mobile-background:before { background-color: #8CC63E; }
this is html code
<div class="icon circle mobile-background mobile"><h2 class="mobileC ">Mobile games</h2></div>
As you can see via normal browser they are centered
but when I open the page via mobile I see this
The same result if I turn-off the line-height from browser inspector.
Can someone know how can fix this?
Did you try to add a
vertical-align:middle;
?
in most cases, it works.
Or you can just use padding, and avoid resizing by using:
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}