Closed tulong sa mga batak sa web developing

[PHC Bor1s]

bat nagkakaron ng puting sobrang line sa kanan ng second div ko.

 

[Deleted member 622421]

bat nagkakaron ng puting sobrang line sa kanan ng second div ko. View attachment 662509

gawin mong 100% yung width paps

 

[PHC Bor1s]

gawin mong 100% yung width paps

naka 100% na po pareho width and height e. di ko kasi masend yung code dito. mahaba masyado

 

[PHC Bor1s]

tinry ko gawing mas mataas pa sa 100% yung width,lumalapad lang yung buong black div,may puti padin siya sa dulo

 

[Deleted member 622421]

tinry ko gawing mas mataas pa sa 100% yung width,lumalapad lang yung buong black div,may puti padin siya sa dulo

check mo css ng body mo baka hndi nka 100% yung width

 

[Rayquaza]

naka float ba yan ts?

 

[PHC Bor1s]

naka float ba yan ts?

hinde e

 

[Impostor Syndrome]

ipakita mo html code mo.

 

[Mr. Stark]

bat nagkakaron ng puting sobrang line sa kanan ng second div ko. View attachment 662509

Margin ng body gawin mong 0.

 

[PHC Bor1s]

html

 

[PHC Bor1s]

font-face
{
font-family: first;
src: url(geek.ttf);
}
*
{
padding: 0;
margin: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
width: 100%;
height: 80px;
}
.brand, .search, .menu {
position: absolute;
line-height: 80px;
}
.brand {
margin-left: 40px;
font-family: "Monument Extended";
color: #fff;
font-size: 16px;
}
.search {
right: 140px;
color: #fff;
}
.menu{
right: 40px;
font-family: Helvetica;
color: #fff;
font-size: 20px;
}
.media {
position: absolute;
right: -150px;
top: 50%;
transform: rotate(90deg);
}
.media ul {
list-style: none;
}
.media ul li {
display: inline-block;
text-transform: uppercase;
color: rgba(255, 255, 255, .7);
font-family: Helvetica;
font-size: 12px;
font-weight: 300;
letter-spacing: 2px;
margin-right: 40px;
}
.media ul li a{
text-decoration: none;
color: #fff;
}
.media ul li a:hover{
color: #ebcba7;
}

.header {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
font-family: first;
font-size: 40px;
letter-spacing: 3px;
text-shadow: 2px 2px 20px #000;
justify-content: center;
}
h1 span {
-webkit-text-stroke: 1px #000;
color: rgba(0,0,0,0);
}
.bottomnav {
position: absolute;
width: 45%;
height: 80px;
bottom: -40px;
background: #fff;
left: 50%;
transform: translate(-50%, -50%);
}
.bottomnav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 80px;
float: right;
}
.bottomnav ul li {
padding-right: 50px;
display: inline-block;
}
.bar {
position: absolute;
margin: 0;
background: rgba(0,0,0,0.3);
width: 50%;
height: 1px;
top: 50%;
left: 19%;
}
.counter {
position: absolute;
font-family: Poppins;
font-weight: bolder;
color: #000;
line-height: 80px;
padding-left: 50px;
}
.content {
height: 100%;
width: 100%;
background-color: #030000;
z-index: 0;
top: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

.content-wrapper{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.content-images {
width: 70%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}

.content-image-wrapper {
height: 220px;
width: 150px;
text-align: center;
position: relative;
}

.content-image-wrapper img{
max-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
}

.one {
top: -10px;
}
.two {
top: -50px;
}
.three {
top: 20px;
}
.four {
top: -20px;
}

.content-image-wrapper h4 {
font-size: 1.8em;
position: relative;
top: -30px;
opacity: 0.6;
}

.text {
padding-top: 100px;
width: 60%;
font-size: 0.8em;
text-align: center;
}
.story
{
width: 100%;
height: 100%;
}

css

 

[Mr. Stark]

font-face
{
font-family: first;
src: url(geek.ttf);
}
*
{
padding: 0;
margin: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
width: 100%;
height: 80px;
}
.brand, .search, .menu {
position: absolute;
line-height: 80px;
}
.brand {
margin-left: 40px;
font-family: "Monument Extended";
color: #fff;
font-size: 16px;
}
.search {
right: 140px;
color: #fff;
}
.menu{
right: 40px;
font-family: Helvetica;
color: #fff;
font-size: 20px;
}
.media {
position: absolute;
right: -150px;
top: 50%;
transform: rotate(90deg);
}
.media ul {
list-style: none;
}
.media ul li {
display: inline-block;
text-transform: uppercase;
color: rgba(255, 255, 255, .7);
font-family: Helvetica;
font-size: 12px;
font-weight: 300;
letter-spacing: 2px;
margin-right: 40px;
}
.media ul li a{
text-decoration: none;
color: #fff;
}
.media ul li a:hover{
color: #ebcba7;
}

.header {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
font-family: first;
font-size: 40px;
letter-spacing: 3px;
text-shadow: 2px 2px 20px #000;
justify-content: center;
}
h1 span {
-webkit-text-stroke: 1px #000;
color: rgba(0,0,0,0);
}
.bottomnav {
position: absolute;
width: 45%;
height: 80px;
bottom: -40px;
background: #fff;
left: 50%;
transform: translate(-50%, -50%);
}
.bottomnav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 80px;
float: right;
}
.bottomnav ul li {
padding-right: 50px;
display: inline-block;
}
.bar {
position: absolute;
margin: 0;
background: rgba(0,0,0,0.3);
width: 50%;
height: 1px;
top: 50%;
left: 19%;
}
.counter {
position: absolute;
font-family: Poppins;
font-weight: bolder;
color: #000;
line-height: 80px;
padding-left: 50px;
}
.content {
height: 100%;
width: 100%;
background-color: #030000;
z-index: 0;
top: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

.content-wrapper{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.content-images {
width: 70%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}

.content-image-wrapper {
height: 220px;
width: 150px;
text-align: center;
position: relative;
}

.content-image-wrapper img{
max-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
}

.one {
top: -10px;
}
.two {
top: -50px;
}
.three {
top: 20px;
}
.four {
top: -20px;
}

.content-image-wrapper h4 {
font-size: 1.8em;
position: relative;
top: -30px;
opacity: 0.6;
}

.text {
padding-top: 100px;
width: 60%;
font-size: 0.8em;
text-align: center;
}
.story
{
width: 100%;
height: 100%;
}

css

.media ul margin 0, yung sa .media ul li intentional ba yung margin-right: 40px mo?

 

[Stranger1509]

asan ba jan sa css mo ung last div ano class name?

 

[PHC Bor1s]

.media ul margin 0, yung sa .media ul li intentional ba yung margin-right: 40px mo?

Yes intentional po siya sir. Para di nakasagat sa kanan yung mga buttons pang social media

 

[PHC Bor1s]

Margin ng body gawin mong 0.

Naka set na po sa 0,pati padding. Tinry ko na nga din set all using *

 

[PHC Bor1s]

asan ba jan sa css mo ung last div ano class name?

.story po. Nasa pinaka baba ng css

 

[PHC Bor1s]

Hindi kaya sa pc na gamit ko lang? Kasi sa tropa ko ganto din problem niya e,magkaiba ginagawa naming project pero same problem. Same comp shop din kase kami gumawa. Malaki kase monitor dun e

 

[Mr. Stark]

Naka set na po sa 0,pati padding. Tinry ko na nga din set all using *

.story display block mo.

 

[Stranger1509]

.story po. Nasa pinaka baba ng css

try mo meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

check mo din mga closing tag mo, baka may dynamic tags ka na unclosed
pag ayaw yan ito pa try mo

<div style="clear:both"></div>
<div class="story"></div>