I am new to HTML and CSS and have been trying to make a portfolio website.
I have a problem on how to set my logo
I have a 13" screen and the logo is perfectly aligned with my subheading ("I am...")
However, when I go to the website with a bigger screen like my desktop, it becomes centered. I want the left side of the logo to be perfectly aligned with my subheading, any ideas on how this could be done?
HTML:
<svg id="logo" width="820" height="104" viewBox="0 0 820 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50 0.911999V79.392C50 86.4 47.84 92.112 43.52 96.528C39.2 100.848 33.344 103.008 25.952 103.008C18.176 103.008 12.032 100.656 7.52 95.952C3.104 91.152 0.895996 84.576 0.895996 76.224H7.376C7.376 82.368 8.864 87.408 11.84 91.344C14.816 95.28 19.52 97.248 25.952 97.248C32.096 97.248 36.512 95.52 39.2 92.064C41.984 88.512 43.376 84.288 43.376 79.392V0.911999H50Z" stroke="#6daffe" & stroke-width="5"/>
<path d="M80.9442 6.384V48.576H121.264V54.048H80.9442V96.528H125.584V102H74.4642V0.911999H125.584V6.384H80.9442Z" stroke="#6daffe" & stroke-width="5"/>
<path d="M199.775 102L173.855 58.944H173.279H151.679V102H145.199V0.911999H172.991C184.223 0.911999 192.623 3.552 198.191 8.832C203.855 14.112 206.687 21.12 206.687 29.856C206.687 37.632 204.479 44.064 200.063 49.152C195.743 54.144 189.407 57.216 181.055 58.368L207.551 102H199.775ZM151.679 53.472H173.279C182.207 53.472 188.879 51.312 193.295 46.992C197.711 42.672 199.919 36.96 199.919 29.856C199.919 14.4 190.943 6.67199 172.991 6.67199H151.679V53.472Z" stroke="#6daffe" & stroke-width="5"/>
<path d="M232.397 6.384V48.576H272.717V54.048H232.397V96.528H277.037V102H225.917V0.911999H277.037V6.384H232.397Z" stroke="#6daffe" & stroke-width="5"/>
<path d="M390.972 3.072V102H384.492V16.608L346.476 102H341.292L303.132 16.608V102H296.652V3.072H303.564L343.884 93.504L384.204 3.072H390.972Z" stroke="#6daffe" & stroke-width="5"/>
<path d="M477.129 0.911999L445.305 61.104V102H438.825V61.104L406.713 0.911999H414.057L441.993 55.056L469.785 0.911999H477.129Z" stroke="#6daffe" & stroke-width="5"/>
<path d="M595.676 0.911999L563.852 61.104V102H557.372V61.104L525.26 0.911999H532.604L560.54 55.056L588.332 0.911999H595.676Z" stroke="#6daffe" & stroke-width="5"/>
<path d="M656.302 103.152C646.99 103.152 638.59 100.992 631.102 96.672C623.614 92.256 617.758 86.112 613.534 78.24C609.31 70.368 607.198 61.488 607.198 51.6C607.198 41.616 609.31 32.736 613.534 24.96C617.758 17.088 623.614 10.992 631.102 6.67199C638.59 2.256 646.99 0.0480042 656.302 0.0480042C665.614 0.0480042 674.014 2.256 681.502 6.67199C688.99 10.992 694.846 17.088 699.07 24.96C703.294 32.736 705.406 41.616 705.406 51.6C705.406 61.488 703.294 70.368 699.07 78.24C694.846 86.112 688.99 92.256 681.502 96.672C674.014 100.992 665.614 103.152 656.302 103.152ZM656.302 97.392C664.27 97.392 671.47 95.52 677.902 91.776C684.334 88.032 689.374 82.704 693.022 75.792C696.766 68.88 698.638 60.816 698.638 51.6C698.638 42.288 696.766 34.176 693.022 27.264C689.374 20.352 684.334 15.024 677.902 11.28C671.47 7.536 664.27 5.664 656.302 5.664C648.334 5.664 641.134 7.536 634.702 11.28C628.27 15.024 623.182 20.352 619.438 27.264C615.694 34.176 613.822 42.288 613.822 51.6C613.822 60.816 615.694 68.88 619.438 75.792C623.182 82.704 628.27 88.032 634.702 91.776C641.134 95.52 648.334 97.392 656.302 97.392Z" stroke="#6daffe" & stroke-width="5"/>
<path d="M770.068 103.152C760.756 103.152 752.355 100.992 744.867 96.672C737.379 92.256 731.523 86.112 727.299 78.24C723.075 70.368 720.964 61.488 720.964 51.6C720.964 41.616 723.075 32.736 727.299 24.96C731.523 17.088 737.379 10.992 744.867 6.67199C752.355 2.256 760.756 0.0480042 770.068 0.0480042C779.38 0.0480042 787.78 2.256 795.268 6.67199C802.756 10.992 808.612 17.088 812.836 24.96C817.06 32.736 819.172 41.616 819.172 51.6C819.172 61.488 817.06 70.368 812.836 78.24C808.612 86.112 802.756 92.256 795.268 96.672C787.78 100.992 779.38 103.152 770.068 103.152ZM770.068 97.392C778.036 97.392 785.235 95.52 791.667 91.776C798.099 88.032 803.139 82.704 806.787 75.792C810.531 68.88 812.404 60.816 812.404 51.6C812.404 42.288 810.531 34.176 806.787 27.264C803.139 20.352 798.099 15.024 791.667 11.28C785.235 7.536 778.036 5.664 770.068 5.664C762.1 5.664 754.9 7.536 748.468 11.28C742.036 15.024 736.947 20.352 733.203 27.264C729.459 34.176 727.588 42.288 727.588 51.6C727.588 60.816 729.459 68.88 733.203 75.792C736.947 82.704 742.036 88.032 748.468 91.776C754.9 95.52 762.1 97.392 770.068 97.392Z" stroke="#6daffe" & stroke-width="5"/>
</svg>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
html {
font-size: 10px;
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
background-color: #f8f8f8;
}
a {
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
p {
color: black;
font-size: 1.4rem;
margin-top: 5px;
line-height: 2.5rem;
font-weight: 300;
letter-spacing: .05rem;
}
.section-title {
font-size: 4rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
}
.section-title span {
color: #6daffe;
}
.cta {
display: inline-block;
padding: 10px 30px;
color: white;
background-color: transparent;
border: 2px solid #6daffe;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color, color;
}
.cta:hover {
color: white;
background-color: #6daffe;
}
.brand h1 {
font-size: 3rem;
text-transform: uppercase;
color: white;
}
.brand h1 span {
color: #6daffe;
}
#home {
background-image: url(/images/hero-background-phone.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
#home::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .7;
z-index: -1;
}
#home .home {
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#home #logo{
display: block;
width: 100%;
position: relative;
animation: text-fill 2s ease forwards 3s;
}
What happends is when min-width= 768px that logo gets a width more than 100%
add this to your style.css it will solve your issue
@media only screen and (min-width: 768px)
#home #logo {
width: 100%!important;
}
or just search in your style.css and modify it depending on the size that you want
also add a margin to the bottom because the logo hides the text underneath it
@media only screen and (min-width: 768px)
#home #logo {
width: 100%!important;
margin-bottom: 15px;
}
i like your website :)