Heads up I'm a beginner on coding.
I have been trying to make a portfolio type of website to practice my coding with HTML and CSS, I wanted to use 2 SVGs at the bottom of the page but I ran into some problem. Whenever I use position: relative; on both of the SVG, they would not appear on the page, but whenever I reload my page SVG can be seen for a slight second before going away.
The only way I managed to make it work is through making them position: absolute;, however it will create a problem when window is re-scaled.
This is what I want the website to look like.
#ig {
position: absolute;
margin-top: 37%;
margin-left: 40%;
}
.ig {
position: relative;
margin-right: 17%;
font-size: 120%;
font-family: "Lobster", sans-serif;
}
.twitter {
position: absolute;
padding: 0;
margin-top: 37%;
margin-left: 59%;
}
.handle {
position: relative;
bottom: 9%;
left: 10%;
font-size: 120%;
font-family: "Lobster", sans-serif;
}
<svg
id="ig"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<title>instagram1</title>
<path
d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"
></path>
<path
d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"
></path>
<path
d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"
></path>
</svg>
<p class="ig">annoying_fly</p>
<svg
class="twitter"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<title>twitter</title>
<path
d="M20.833 5.262c-0.186 0.242-0.391 0.475-0.616 0.696-0.233 0.232-0.347 0.567-0.278 0.908 0.037 0.182 0.060 0.404 0.061 0.634 0 5.256-2.429 8.971-5.81 10.898-2.647 1.509-5.938 1.955-9.222 1.12 1.245-0.361 2.46-0.921 3.593-1.69 0.147-0.099 0.273-0.243 0.352-0.421 0.224-0.505-0.003-1.096-0.508-1.32-2.774-1.233-4.13-2.931-4.769-4.593-0.417-1.084-0.546-2.198-0.52-3.227 0.021-0.811 0.138-1.56 0.278-2.182 0.394 0.343 0.803 0.706 1.235 1.038 2.051 1.577 4.624 2.479 7.395 2.407 0.543-0.015 0.976-0.457 0.976-1v-1.011c-0.002-0.179 0.009-0.357 0.034-0.533 0.113-0.806 0.504-1.569 1.162-2.141 0.725-0.631 1.636-0.908 2.526-0.846s1.753 0.463 2.384 1.188c0.252 0.286 0.649 0.416 1.033 0.304 0.231-0.067 0.463-0.143 0.695-0.228zM22.424 2.183c-0.74 0.522-1.523 0.926-2.287 1.205-0.931-0.836-2.091-1.302-3.276-1.385-1.398-0.097-2.836 0.339-3.977 1.332-1.036 0.901-1.652 2.108-1.83 3.372-0.037 0.265-0.055 0.532-0.054 0.8-1.922-0.142-3.693-0.85-5.15-1.97-0.775-0.596-1.462-1.309-2.034-2.116-0.32-0.45-0.944-0.557-1.394-0.237-0.154 0.109-0.267 0.253-0.335 0.409 0 0-0.132 0.299-0.285 0.76-0.112 0.337-0.241 0.775-0.357 1.29-0.163 0.722-0.302 1.602-0.326 2.571-0.031 1.227 0.12 2.612 0.652 3.996 0.683 1.775 1.966 3.478 4.147 4.823-1.569 0.726-3.245 1.039-4.873 0.967-0.552-0.024-1.019 0.403-1.043 0.955-0.017 0.389 0.19 0.736 0.513 0.918 4.905 2.725 10.426 2.678 14.666 0.261 4.040-2.301 6.819-6.7 6.819-12.634-0.001-0.167-0.008-0.33-0.023-0.489 1.006-1.115 1.676-2.429 1.996-3.781 0.127-0.537-0.206-1.076-0.743-1.203-0.29-0.069-0.58-0.003-0.807 0.156z"
></path>
</svg>
<p class="handle">#kintay8</p>
use bootstrap or use it like this it will solve your issue
.container{
display :flex
}
.instagram, .twitter{
width: 50%;
text-align: center;
}
p.ig, p.handle{
font-size: 120%;
font-family: "Lobster", sans-serif;
}
<div class="container">
<div class="instagram">
<svg id="ig" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>instagram1</title>
<path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
<path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
<path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
</svg>
<p class="ig">annoying_fly</p>
</div>
<div class="twitter">
<svg class="twitter" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>twitter</title>
<path d="M20.833 5.262c-0.186 0.242-0.391 0.475-0.616 0.696-0.233 0.232-0.347 0.567-0.278 0.908 0.037 0.182 0.060 0.404 0.061 0.634 0 5.256-2.429 8.971-5.81 10.898-2.647 1.509-5.938 1.955-9.222 1.12 1.245-0.361 2.46-0.921 3.593-1.69 0.147-0.099 0.273-0.243 0.352-0.421 0.224-0.505-0.003-1.096-0.508-1.32-2.774-1.233-4.13-2.931-4.769-4.593-0.417-1.084-0.546-2.198-0.52-3.227 0.021-0.811 0.138-1.56 0.278-2.182 0.394 0.343 0.803 0.706 1.235 1.038 2.051 1.577 4.624 2.479 7.395 2.407 0.543-0.015 0.976-0.457 0.976-1v-1.011c-0.002-0.179 0.009-0.357 0.034-0.533 0.113-0.806 0.504-1.569 1.162-2.141 0.725-0.631 1.636-0.908 2.526-0.846s1.753 0.463 2.384 1.188c0.252 0.286 0.649 0.416 1.033 0.304 0.231-0.067 0.463-0.143 0.695-0.228zM22.424 2.183c-0.74 0.522-1.523 0.926-2.287 1.205-0.931-0.836-2.091-1.302-3.276-1.385-1.398-0.097-2.836 0.339-3.977 1.332-1.036 0.901-1.652 2.108-1.83 3.372-0.037 0.265-0.055 0.532-0.054 0.8-1.922-0.142-3.693-0.85-5.15-1.97-0.775-0.596-1.462-1.309-2.034-2.116-0.32-0.45-0.944-0.557-1.394-0.237-0.154 0.109-0.267 0.253-0.335 0.409 0 0-0.132 0.299-0.285 0.76-0.112 0.337-0.241 0.775-0.357 1.29-0.163 0.722-0.302 1.602-0.326 2.571-0.031 1.227 0.12 2.612 0.652 3.996 0.683 1.775 1.966 3.478 4.147 4.823-1.569 0.726-3.245 1.039-4.873 0.967-0.552-0.024-1.019 0.403-1.043 0.955-0.017 0.389 0.19 0.736 0.513 0.918 4.905 2.725 10.426 2.678 14.666 0.261 4.040-2.301 6.819-6.7 6.819-12.634-0.001-0.167-0.008-0.33-0.023-0.489 1.006-1.115 1.676-2.429 1.996-3.781 0.127-0.537-0.206-1.076-0.743-1.203-0.29-0.069-0.58-0.003-0.807 0.156z"></path>
</svg>
<p class="handle">#kintay8</p>
</div>
</div>
First of all, I can see your svgs but their positioning is not correct. You have 2 options. One option is to position them absolute as you have already done and they will be responsive if you use vw for margin top and margin left (in my opinion you should you top and left or bottom and right instead of margin as you position them absolute) or you put them in a flex container in order to be in the same row
Check this. hope it helps.
You don't have to add absolute. A simple HTML structure could solve your problem.
.social-networks{display:inline-block; width:250px; text-align:center}
#ig {
margin:0 auto
}
.ig {
position: relative;
margin-right: 0;
font-size: 120%;
font-family: "Lobster", sans-serif;
}
.twitter {
margin:0 auto
}
.handle {
position: relative;
font-size: 120%;
font-family: "Lobster", sans-serif;
}
<div class="social-networks">
<svg id="ig" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>instagram1</title>
<path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
<path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
<path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
</svg>
<p class="ig">annoying_fly</p>
</div>
<div class="social-networks">
<svg class="twitter" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>twitter</title>
<path d="M20.833 5.262c-0.186 0.242-0.391 0.475-0.616 0.696-0.233 0.232-0.347 0.567-0.278 0.908 0.037 0.182 0.060 0.404 0.061 0.634 0 5.256-2.429 8.971-5.81 10.898-2.647 1.509-5.938 1.955-9.222 1.12 1.245-0.361 2.46-0.921 3.593-1.69 0.147-0.099 0.273-0.243 0.352-0.421 0.224-0.505-0.003-1.096-0.508-1.32-2.774-1.233-4.13-2.931-4.769-4.593-0.417-1.084-0.546-2.198-0.52-3.227 0.021-0.811 0.138-1.56 0.278-2.182 0.394 0.343 0.803 0.706 1.235 1.038 2.051 1.577 4.624 2.479 7.395 2.407 0.543-0.015 0.976-0.457 0.976-1v-1.011c-0.002-0.179 0.009-0.357 0.034-0.533 0.113-0.806 0.504-1.569 1.162-2.141 0.725-0.631 1.636-0.908 2.526-0.846s1.753 0.463 2.384 1.188c0.252 0.286 0.649 0.416 1.033 0.304 0.231-0.067 0.463-0.143 0.695-0.228zM22.424 2.183c-0.74 0.522-1.523 0.926-2.287 1.205-0.931-0.836-2.091-1.302-3.276-1.385-1.398-0.097-2.836 0.339-3.977 1.332-1.036 0.901-1.652 2.108-1.83 3.372-0.037 0.265-0.055 0.532-0.054 0.8-1.922-0.142-3.693-0.85-5.15-1.97-0.775-0.596-1.462-1.309-2.034-2.116-0.32-0.45-0.944-0.557-1.394-0.237-0.154 0.109-0.267 0.253-0.335 0.409 0 0-0.132 0.299-0.285 0.76-0.112 0.337-0.241 0.775-0.357 1.29-0.163 0.722-0.302 1.602-0.326 2.571-0.031 1.227 0.12 2.612 0.652 3.996 0.683 1.775 1.966 3.478 4.147 4.823-1.569 0.726-3.245 1.039-4.873 0.967-0.552-0.024-1.019 0.403-1.043 0.955-0.017 0.389 0.19 0.736 0.513 0.918 4.905 2.725 10.426 2.678 14.666 0.261 4.040-2.301 6.819-6.7 6.819-12.634-0.001-0.167-0.008-0.33-0.023-0.489 1.006-1.115 1.676-2.429 1.996-3.781 0.127-0.537-0.206-1.076-0.743-1.203-0.29-0.069-0.58-0.003-0.807 0.156z"></path>
</svg>
<p class="handle">#kintay8</p>
</div>
Check this Out:
HTML:
<div id="about-me">
<h1>About Me</h1>
<p> bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p> bla bla bla bla bla bla bla bla bla bla bla bla</p>
<h1>Things I Offer</h1>
<p> bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p> bla bla bla bla bla bla bla bla bla bla bla bla</p>
<div id="socials-container">
<div id="instagram">
<svg id="ig" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>instagram1</title>
<path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path>
<path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path>
<path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
</svg>
<p class="ig">annoying_fly</p>
</div>
<div id="twitter-box">
<svg id="twitter" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>twitter</title>
<path d="M20.833 5.262c-0.186 0.242-0.391 0.475-0.616 0.696-0.233 0.232-0.347 0.567-0.278 0.908 0.037 0.182 0.060 0.404 0.061 0.634 0 5.256-2.429 8.971-5.81 10.898-2.647 1.509-5.938 1.955-9.222 1.12 1.245-0.361 2.46-0.921 3.593-1.69 0.147-0.099 0.273-0.243 0.352-0.421 0.224-0.505-0.003-1.096-0.508-1.32-2.774-1.233-4.13-2.931-4.769-4.593-0.417-1.084-0.546-2.198-0.52-3.227 0.021-0.811 0.138-1.56 0.278-2.182 0.394 0.343 0.803 0.706 1.235 1.038 2.051 1.577 4.624 2.479 7.395 2.407 0.543-0.015 0.976-0.457 0.976-1v-1.011c-0.002-0.179 0.009-0.357 0.034-0.533 0.113-0.806 0.504-1.569 1.162-2.141 0.725-0.631 1.636-0.908 2.526-0.846s1.753 0.463 2.384 1.188c0.252 0.286 0.649 0.416 1.033 0.304 0.231-0.067 0.463-0.143 0.695-0.228zM22.424 2.183c-0.74 0.522-1.523 0.926-2.287 1.205-0.931-0.836-2.091-1.302-3.276-1.385-1.398-0.097-2.836 0.339-3.977 1.332-1.036 0.901-1.652 2.108-1.83 3.372-0.037 0.265-0.055 0.532-0.054 0.8-1.922-0.142-3.693-0.85-5.15-1.97-0.775-0.596-1.462-1.309-2.034-2.116-0.32-0.45-0.944-0.557-1.394-0.237-0.154 0.109-0.267 0.253-0.335 0.409 0 0-0.132 0.299-0.285 0.76-0.112 0.337-0.241 0.775-0.357 1.29-0.163 0.722-0.302 1.602-0.326 2.571-0.031 1.227 0.12 2.612 0.652 3.996 0.683 1.775 1.966 3.478 4.147 4.823-1.569 0.726-3.245 1.039-4.873 0.967-0.552-0.024-1.019 0.403-1.043 0.955-0.017 0.389 0.19 0.736 0.513 0.918 4.905 2.725 10.426 2.678 14.666 0.261 4.040-2.301 6.819-6.7 6.819-12.634-0.001-0.167-0.008-0.33-0.023-0.489 1.006-1.115 1.676-2.429 1.996-3.781 0.127-0.537-0.206-1.076-0.743-1.203-0.29-0.069-0.58-0.003-0.807 0.156z"></path>
</svg>
<p class="handle">#kintay8</p>
</div>
</div>
</div>
CSS:
#about-me {
background-color: #ccc;
display: flex;
flex-direction: column;
text-align: center;
items-align: center;
width: 80vw;
margin-left: 10vw;
}
#socials-container {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 50vw;
margin: 0 auto;
}
#instagram {
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
}
#twitter-box {
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
}
.ig, .handle {
font-family: "Lobster", sans-serif;
}
Related
I'm working on a project and currently I meet a problem.
Here is my markup:
<a href="#">Here is a link icon.
<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
<path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
<path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>
</svg>
</a>
The problem is the svg icon is a little bit higher than I expected, so I want to downward the svg downward 2 to 3 px without changing its size but change the svg`s position. How could I achieve it?
Try using flex. In this case you can omit using position: absolute; but can align your elements in this block.
.custom-link {
display: inline-flex;
align-items: center; /* align content vertically */
column-gap: 0.25rem; /* add gap between content items */
}
<p>Before using flex:</p>
<a href="#">Here is a link icon.
<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
<path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
<path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>
</svg>
</a>
<p>With using flex:</p>
<a class="custom-link" href="#">Here is a link icon.
<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
<path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
<path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>
</svg>
</a>
use the svg code for downward arrow , if you want to color change svg code path , using atter (fill) and (width).
<div class="down-arrow">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000" width="30" viewBox="0 0 384 512"><path d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z"/></svg>
</div>
other arrow down ::
<svg xmlns="http://www.w3.org/2000/svg" fill="#000" width="25" viewBox="0 0 384 512"><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>
position:relative and a negative y-offset via bottom:-0.1em should work just fine.
.svg-inline{
display:inline-block;
position:relative;
/* add a baseline y offset */
bottom:-0.1em;
/* adjust size if needed */
font-size:0.85em;
/* icon will scale along with the parent's font-size */
height: 1em;
margin-left:0.2em;
}
In contrast to vertical-align:-0.1em bottom:-0.1emyou won't introduce any additional bottom margins, since it#s relatively positioned.
Since you want your svg icon to behave similar to an icon-font character/glyph I also recommend these optimizations:
remove width and height attributes but keep your viewBox you can instead scale you icon relative to your link's font-size
wrap your icon in a symbol element
remove path related fill attributes and add fill="currentColor" to your symbol – this way you can easily style your icons color via css
<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
<symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
<path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
</symbol>
</svg>
Example 1: responsive inlined Icon
a{
word-break: break-all;
}
.custom-link{
display:inline-block;
}
.svg-inline{
display:inline-block;
position:relative;
/* add a baseline y offset */
bottom:-0.1em;
/* adjust size if needed */
font-size:0.85em;
/* icon will scale along with the parent's font-size */
height: 1em;
color: #076aff;
margin-left:0.2em;
}
/** not recommended: will introduce bottom margins **/
.svg-inline-vertical-align{
position:static;
vertical-align:-0.75em;
}
/** if icon have a square 1/1 aspect ratio **/
.svg-inline-square{
width: 1em;
}
<style>
body{
font-size:2vw;
font-family: 'Segoe UI', sans-serif;
transition:0.3s;
}
a{
text-decoration-color: #076aff;
text-decoration-color: #ccc;
color:inherit;
font-weight:bold;
}
.layout{
width:50vw;
border:1px solid #ccc;
position:relative;
margin: 0 auto;
overflow:auto;
resize: both;
}
</style>
<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
<symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
<path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
</symbol>
</svg>
<div class="layout">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<a class="custom-link" href="#">
link icon (position:relative)<svg class="svg-inline svg-inline-square" >
<use href="#icon-link" />
</svg>
</a>
Aenean massa. Cum sociis natoque penatibus et
<a class="custom-link" href="#">
link icon (vertical-align)<svg class="svg-inline svg-inline-square svg-inline-vertical-align" >
<use href="#icon-link" />
</svg>
</a>
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</p>
</div>
Example 2: multiple icons with different sizes
let range = document.querySelector("#range");
range.addEventListener("change", function (e) {
let val = e.currentTarget.value;
document.body.style.fontSize = 1*val+'vw'
});
body{
font-size:2vw;
font-family: 'Segoe UI', sans-serif;
transition:0.3s;
}
a{
text-decoration-color: #076aff;
text-decoration-color: #ccc;
color:inherit;
font-weight:bold;
}
.layout{
width:50vw;
border:1px solid #ccc;
position:relative;
margin: 0 auto;
overflow:auto;
resize: both;
}
.custom-link{
display:inline-block;
}
.svg-inline{
display:inline-block;
font-size:0.85em;
height: 1em;
position:relative;
bottom:-0.1em;
color: #076aff;
margin-left:0.2em;
}
.svg-inline-square{
width: 1em;
}
<p style="text-align:center; font-size:12px;">Font size:<input type="range" value="2" id="range" min="1" max="2" step="0.1"></p>
<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
<symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
<path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
</symbol>
<symbol id="icon-comments" viewBox="0 0 640 512" fill="currentColor">
<path d="M208 0C322.9 0 416 78.8 416 176C416 273.2 322.9 352 208 352C189.3 352 171.2 349.7 153.9 345.8C123.3 364.8 79.13 384 24.95 384C14.97 384 5.93 378.1 2.018 368.9C-1.896 359.7-.0074 349.1 6.739 341.9C7.26 341.5 29.38 317.4 45.73 285.9C17.18 255.8 0 217.6 0 176C0 78.8 93.13 0 208 0zM164.6 298.1C179.2 302.3 193.8 304 208 304C296.2 304 368 246.6 368 176C368 105.4 296.2 48 208 48C119.8 48 48 105.4 48 176C48 211.2 65.71 237.2 80.57 252.9L104.1 277.8L88.31 308.1C84.74 314.1 80.73 321.9 76.55 328.5C94.26 323.4 111.7 315.5 128.7 304.1L145.4 294.6L164.6 298.1zM441.6 128.2C552 132.4 640 209.5 640 304C640 345.6 622.8 383.8 594.3 413.9C610.6 445.4 632.7 469.5 633.3 469.9C640 477.1 641.9 487.7 637.1 496.9C634.1 506.1 625 512 615 512C560.9 512 516.7 492.8 486.1 473.8C468.8 477.7 450.7 480 432 480C350 480 279.1 439.8 245.2 381.5C262.5 379.2 279.1 375.3 294.9 369.9C322.9 407.1 373.9 432 432 432C446.2 432 460.8 430.3 475.4 426.1L494.6 422.6L511.3 432.1C528.3 443.5 545.7 451.4 563.5 456.5C559.3 449.9 555.3 442.1 551.7 436.1L535.9 405.8L559.4 380.9C574.3 365.3 592 339.2 592 304C592 237.7 528.7 183.1 447.1 176.6L448 176C448 159.5 445.8 143.5 441.6 128.2H441.6z" />
</symbol>
</svg>
<div class="layout">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<a class="custom-link" href="#">
link icon<svg class="svg-inline svg-inline-square" >
<use href="#icon-link" />
</svg>
</a>
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
<a class="custom-link" href="#">link icon<svg class="svg-inline" viewBox="0 0 640 512" style="font-size:0.95em">
<use href="#icon-comments" />
</svg>
</a>
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>
</div>
<p style="text-align:center; font-size:12px;">resize</p>
This question already has answers here:
How to make an inline element appear on new line, or block element not occupy the whole line?
(9 answers)
Links on New Line
(10 answers)
How to line-break 2 anchors
(3 answers)
Move <a> tag to a new line without <br>
(5 answers)
Closed 1 year ago.
It's my first time creating a website and I want to add these images as hyperlinks stacked on top of each other. However, they're stacked horizontally even though I was following a tutorial.
This is my HTML code:
.socials {
padding-bottom: 200px;
padding-right: 16px;
}
.social {
margin: 10px;
}
<div class="socials">
<a href="http://www.linkedin.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg> </a>
</a>
<a href="http://www.github.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
<a href="http://www.instagram.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
To demonstrate, I replaced your SVG's with Images. You can use flex-box with flex-direction: column; to have your images stack. Also, for good measures, I positioned it in the center. See below.
.socials {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="socials">
<a href="http://www.linkedin.com" class="social">
<img src="https://dummyimage.com/50/000/fff">
</a>
<a href="http://www.github.com" class="social">
<img src="https://dummyimage.com/50/000/fff">
</a>
<a href="http://www.instagram.com" class="social">
<img src="https://dummyimage.com/50/000/fff">
</a>
</div>
with CSS GRID
css grid automatically puts everything in row mode :)
...few lines and your work is complete!
-or with flex-box it automatically transforms everything into columns, so you need to write an extra CSS property flex-direction
so go for display: grid; I think is the best, simplest solution :)
.socials {
display: grid;
gap: 1rem;
}
.social svg {
fill: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="socials">
<a href="http://www.linkedin.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg>
</a>
<a href="http://www.github.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
<a href="http://www.instagram.com" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
</div>
</body>
</html>
if you want to learn more about grid: https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-your-first-css-grid
this really help me a lot to understand it
Context
I'm trying to create a standard navbar using tailwind css framework.
Blocker
Whenever I try to load the svg logo without a h/p tag, in the example below - "Temp", it doesn't load.
body {
background-image: url('https://image.tmdb.org/t/p/original/rAiYTfKGqDCRIIqo664sY9XZIvQ.jpg');
background-size: cover;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MovieApp</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/css/css.css">
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<header class="mx-96 flex items-center justify-between">
<div>
<h1>temp</h1>
<a href="#">
<img src="../static/img/tmdb.svg" alt="">
</a>
</div>
<div>
<h1>Temporary text</h1>
</div>
</header>
</body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</html>
SVG:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 407.34 160.81"><defs><style>.cls-1{fill:#01d277}</style></defs><title>PoweredByRectangle_Green</title><path class="cls-1" d="M50.38 102.47h6.94V74.71h8.64v-6.89H41.74v6.89h8.64v27.76zM88.53 102.47h6.94v-34.7h-6.94v13.88H78.14V67.77H71.2v34.7h6.94V88.59h10.39v13.88zM121.25 95.53h-13.02v-6.94h11.12v-6.94h-11.12v-6.94h12.43v-6.94h-19.38v34.7h19.97v-6.94zM157.79 82.54L144.1 67.3h-2.23v35.24h7.03V83.17l8.89 9.32 8.88-9.32-.05 19.37h7.04V67.3h-2.19l-13.68 15.24z"/><path class="cls-1" d="M3309.1 1841.93c-23.88 0-23.88 35.77 0 35.77s23.9-35.77 0-35.77zm0 28.59c-13.88 0-13.88-21.45 0-21.45s13.9 21.45 0 21.45z" transform="translate(-3111.93 -1774.68)"/><path class="cls-1" d="M254.5 67.83h6.94v34.7h-6.94zM274.19 95.6v-6.94h11.13v-6.94h-11.13v-6.94h12.44v-6.95h-19.38v34.71h19.96V95.6h-13.02z"/><path class="cls-1" d="M3429.48 1842.91h-10.34v34.7h10.34c23.1 0 23.1-34.7 0-34.7zm0 27.76h-3.4v-20.82h3.4c13.52 0 13.52 20.82 0 20.82z" transform="translate(-3111.93 -1774.68)"/><path class="cls-1" d="M3472.7 1860.23c2.18-1.5 3.11-4.22 3.2-6.84.15-6.12-3.69-10.53-9.85-10.53h-13.74v34.75H3466a10.32 10.32 0 0 0 10.24-10.44 8.43 8.43 0 0 0-3.54-6.94zm-13.4-10.44h6.17a3.51 3.51 0 0 1 0 7h-6.17v-7zm6.17 20.87h-6.17v-6.94h6.17a3.41 3.41 0 0 1 3.49 3.45 3.45 3.45 0 0 1-3.49 3.5z" transform="translate(-3111.93 -1774.68)"/><path class="cls-1" d="M233.13 86.57L224 67.83h-8.01l16.37 35.44h1.55l16.37-35.44h-8.01l-9.14 18.74z"/><path class="cls-1" d="M3494.78 1920.93c14.6 0 24.48-9.88 24.48-24.48v-97.28c0-14.6-9.88-24.48-24.48-24.48h-358.37c-14.6 0-24.48 9.88-24.48 24.48v136.33l12.56-14.56v-121.77a11.94 11.94 0 0 1 11.92-11.92h358.37a11.94 11.94 0 0 1 11.92 11.92v97.28a11.94 11.94 0 0 1-11.92 11.92H3155l-12.56 12.56-.08-.1z" transform="translate(-3111.93 -1774.68)"/><path class="cls-1" d="M3154.3 1827.53v-15h5.9c5.84 0 5.82 9.26 0 9.26h-2.9v5.73h-3zm5.65-8.65c2 0 2-3.36 0-3.36h-2.65v3.36h2.65zM3176.07 1812.27c10.33 0 10.33 15.47 0 15.47s-10.33-15.47 0-15.47zm0 3.09c-6 0-6 9.28 0 9.28s6.01-9.29 0-9.29zM3193.12 1827.85l-6.15-15.33h3.38l3 7.66 2.94-7.52h.15l2.94 7.52 3-7.66h3.38l-6.13 15.26h-.55l-2.75-6.66-2.73 6.72h-.52zM3209.53 1827.53v-15h7.47v3h-4.51v3h3.95v3h-3.95v3h4.77v3h-7.77zM3229.47 1827.53l-3-5.73H3225v5.73h-3v-15h5.92c5.35 0 5.88 7.54 1.47 8.82l3.49 6.19h-3.4zm-4.47-8.65h2.65c2 0 2-3.36 0-3.36H3225v3.36zM3236.76 1827.53v-15h7.52v3h-4.51v3h3.95v3h-3.95v3h4.77v3h-7.77zM3253.71 1827.53h-4.47v-15h4.47c9.99-.01 9.99 15 0 15zm-1.47-12v9h1.47c5.84 0 5.84-9 0-9h-1.47zM3291.89 1820.77l-5.23-8.25h3.65l3.07 5.17 3.07-5.17h3.67l-5.25 8.25v6.76h-3v-6.76zM3282.58 1820.18a3.68 3.68 0 0 0 1.39-3 4.13 4.13 0 0 0-4.26-4.56h-5.94v15h5.94a4.46 4.46 0 0 0 4.43-4.51 3.65 3.65 0 0 0-1.56-2.93zm-5.79-4.51h2.67a1.52 1.52 0 0 1 0 3h-2.67v-3zm2.67 9h-2.67v-3h2.67a1.47 1.47 0 0 1 1.51 1.49 1.49 1.49 0 0 1-1.52 1.54z" transform="translate(-3111.93 -1774.68)"/></svg>
The problem with this is that you have to consider setting a with and height to the image so that it gets a real displaying space if it is not a child of any other tag like hs or p.
I want to animate a element on scroll which is already tranlateY to 400% using CSS, now when the user scroll to that section it will come's up on 10% of scroll and when it's reached to the center of page it remains center until the section has completed scrolled.
In this fiddle you can see the svg image code but it's not working properly i want both circle and svg animation at the same time i have commented the fiddle url
$(window).scroll(function() {
inViewport();
});
$(window).resize(function() {
inViewport();
});
function getCurrentScroll() {
return window.pageYOffset - $('section.section2').offset().top;
};
function inViewport() {
$('section.section2').each(function() {
var divPos = $(this).offset().top;
var divHeight = $(this).height() * 1.4;
var topOfWindow = $(window).scrollTop();
if (divPos < topOfWindow + 50) {
var scrolls = getCurrentScroll() / 4;
$(this).find('.circle').css('width',scrolls+'%');
$(this).find('.circle').css('height',scrolls*2+'%');
$(this).find('.img-box').css('transform','translateY('+(topOfWindow / (15))+'%)');
}
if (divPos + 100 < topOfWindow ) {
$(this).find('.desc').css('transform','translateY('+(-topOfWindow / (10))+'%)');
$(this).find('.img-box').css('transform','translateY('+(topOfWindow / (10))+'%)');
}
});
}
section.section1{
height:500px;
width:100%
}
section.section2 {
padding: 150px 0;
position: relative;
height: 170vh;
overflow: hidden;
}
section.section2 .circle{
position: fixed;
height: 0%;
width: 0%;
left: -50%;
top: 0;
bottom: 0;
right: -50%;
margin:auto;
background:#000;
border-radius: 100%;
transition:ease all 0.25s;
margin:auto;
z-index:-1
}
section.section2 .desc p {
max-width: 50%;
margin: auto;
font-size: 16px;
font-family: arial,sans-serif;
color: rgb(70, 70, 70);
line-height: 1.563;
text-align: center;
}
section.section2 .desc{
transition: ease all 0.25s;
}
section.section2 .img-box {
text-align: center;
margin-top: 50px;
margin-bottom: -110px;
transition: ease all 0.25s;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
transform:translateY(400%);
}
section.section2 .img-box svg {
width: 100px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="section1">
</section>
<section class="section2">
<div class="container">
<div class="desc">
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. These words are here to the reader.</p>
</div>
<div class="img-box">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 195.8 190" viewBox="0 0 195.8 190">
<path
d="m68.7 111.3v-35h3.5l16.3 29.2v-29.2h2.5v35h-3.5l-16.3-29v29zm40.3-23.9c-.4 1-.9 1.9-1.5 2.7-.6.7-1.4 1.3-2.4 1.8-.9.5-1.9.7-2.9.7s-2.1-.2-2.9-.7-1.8-1.2-2.3-1.8c-.7-.9-1.2-1.8-1.6-2.7-.4-1.1-.6-2.2-.6-3.4s.2-2.3.6-3.4c.4-.9.9-1.8 1.6-2.7.5-.8 1.4-1.4 2.3-1.8.9-.5 1.9-.6 2.9-.6 1.1 0 2.1.2 2.9.6.9.5 1.8 1.1 2.4 1.8.6.8 1.2 1.7 1.5 2.7.4 1.1.6 2.2.6 3.4s-.2 2.3-.6 3.4zm-13.4 12.9v-2.8h13.4v2.8zm2.2-16.3c0 2 .4 3.4 1.2 4.4.9 1 1.9 1.5 3.2 1.5s2.4-.5 3.2-1.6c.8-1 1.2-2.5 1.2-4.5s-.4-3.5-1.2-4.5c-.8-1.1-1.9-1.6-3.2-1.6s-2.4.5-3.1 1.5c-.8 1-1.2 2.5-1.2 4.4z"
fill="#fff" />
<path d="m123.7 76.3v35h-3.8v-30.3c-2 1.8-4.3 3.6-6.2 5.3l-1.1-2.1 8.7-7.8z" fill="#fff" />
<g fill="none" stroke="#fff" stroke-miterlimit="10">
<path d="m0 85.8h36.3" />
<path d="m0 102.9h36.3" />
<path d="m159.5 85.8h36.3" />
<path d="m159.5 102.9h36.3" />
</g>
<g fill="#fff">
<path d="m162.8 96.6h1.6v-4.5c0-.2 0-.4 0-.4s-.1.2-.3.4l-.7.6-.6-.6 1.7-1.6h.9v6.2h1.5v.9h-4.1z" />
<path
d="m170.3 96.5c.2.1.6.2 1 .2 1.3 0 2-1.2 2.1-2.4-.3.4-.9.7-1.6.7-1.3 0-2.2-1-2.2-2.3 0-1.4.9-2.4 2.3-2.4 1.5 0 2.6 1.3 2.6 3.3 0 1.8-1 4-3.2 4-.5 0-.9-.1-1.4-.3zm3.2-3.3c0-.9-.7-1.9-1.6-1.9-.8 0-1.3.6-1.3 1.4 0 .9.5 1.5 1.4 1.5s1.5-.5 1.5-1z" />
<path
d="m178.3 96.5c.2.1.6.2 1 .2 1.3 0 2-1.2 2.1-2.4-.3.4-.9.7-1.6.7-1.3 0-2.2-1-2.2-2.3 0-1.4.9-2.4 2.3-2.4 1.5 0 2.6 1.3 2.6 3.3 0 1.8-1 4-3.2 4-.5 0-.9-.1-1.4-.3zm3.2-3.3c0-.9-.7-1.9-1.6-1.9-.8 0-1.3.6-1.3 1.4 0 .9.5 1.5 1.4 1.5.8 0 1.5-.5 1.5-1z" />
<path
d="m186.3 96.5c.2.1.6.2 1 .2 1.3 0 2-1.2 2.1-2.4-.3.4-.9.7-1.6.7-1.3 0-2.2-1-2.2-2.3 0-1.4.9-2.4 2.3-2.4 1.5 0 2.6 1.3 2.6 3.3 0 1.8-1 4-3.2 4-.5 0-.9-.1-1.4-.3zm3.2-3.3c0-.9-.7-1.9-1.6-1.9-.8 0-1.3.6-1.3 1.4 0 .9.5 1.5 1.4 1.5.8 0 1.5-.5 1.5-1z" />
<path d="m5.6 90.4h4.1v.9h-3.1v2.2h2.5v.9h-2.5v2.3h3.3v.9h-4.3z" />
<path
d="m13.3 95.9c.4.4 1.1.8 1.8.8s1.2-.4 1.2-1c0-1.6-3.4-1.2-3.4-3.4 0-1.2 1-2 2.3-2 .7 0 1.4.2 2 .7l-.4.8c-.4-.4-1-.6-1.6-.6-.7 0-1.3.4-1.3 1 0 1.5 3.4 1.1 3.4 3.4 0 1.1-.8 2-2.2 2-.8 0-1.7-.3-2.3-.9z" />
<path d="m22.3 91.3h-2.4v-.9h5.8v.9h-2.4v6.2h-1z" />
<path d="m28 96.5h1v1h-1z" />
<path d="m33.3 146 1.7 2-10.8 9.2-1.7-2z" />
<path
d="m39.3 152.9 2 1.7-1.2 9.7c-.1 1-.5 2.4-.5 2.4s.8-1.1 1.3-1.8l5.3-6.3 2 1.7-9.2 10.9-2-1.7 1.2-9.7c.1-1 .5-2.4.5-2.4s-.8 1.1-1.3 1.8l-5.3 6.2-2-1.7z" />
<path
d="m53.4 163.9 2.3 1.2.9 9.8c.1 1 0 2.5 0 2.5s.5-1.3.9-2l3.8-7.3 2.3 1.2-6.6 12.6-2.3-1.2-1-9.7c-.1-1 0-2.5 0-2.5s-.5 1.3-.9 2l-3.8 7.2-2.3-1.2z" />
<path
d="m75.8 173c4.2 1.1 6.3 4.9 5.3 8.9-1.1 4-4.8 6.4-9 5.3s-6.3-5-5.2-9.1c1-3.8 4.7-6.1 8.9-5.1zm-3.1 12c2.6.7 5.1-.9 5.8-3.7.7-2.7-.7-5.2-3.3-5.9s-5.1.9-5.8 3.5c-.7 2.7.6 5.4 3.3 6.1z" />
<path d="m86.3 175.5 2.8.1 2.7 9.4c.2.8.5 2.1.5 2.1s.3-1.2.6-2.1l3.6-9.1 2.7.1-5.7 14-2.7-.1z" />
<path
d="m106.6 175.2 2.7-.4 7 13.3-2.6.4-1.7-3.4-4.9.7-.7 3.8-2.6.4zm4.4 8-1.8-3.6c-.4-.8-.9-2.1-.9-2.1s-.1 1.4-.2 2.3l-.7 3.9z" />
<path d="m121.6 174.2-4.4 1.5-.7-2.1 11.3-3.8.7 2.1-4.4 1.5 3.8 11.4-2.4.8z" />
<path d="m132.4 167.5 2.3-1.2 6.5 12.6-2.3 1.2z" />
<path
d="m145.4 159.1c3.4-2.6 7.8-1.9 10.2 1.3 2.5 3.3 2.1 7.8-1.3 10.4s-7.8 1.9-10.3-1.5c-2.5-3.2-2-7.6 1.4-10.2zm7.5 9.8c2.2-1.7 2.4-4.6.6-6.9-1.7-2.2-4.5-2.7-6.7-1-2.2 1.6-2.4 4.5-.8 6.7 1.8 2.3 4.7 2.8 6.9 1.2z" />
<path
d="m155.2 151 1.6-2 9.7 1.1c1 .1 2.4.5 2.4.5s-1.1-.8-1.8-1.3l-6.3-5.2 1.6-2 10.9 9.1-1.6 2-9.7-1.1c-1-.1-2.4-.5-2.4-.5s1.1.8 1.8 1.3l6.3 5.2-1.6 2z" />
<path d="m23.1 39.1-2.9 3.7-1.8-1.4 7.3-9.4 1.8 1.4-2.8 3.6 9.4 7.4-1.6 2z" />
<path
d="m30.6 27 6.3-5.7 1.5 1.7-4.3 4 2.5 2.8 3.6-3.2 1.5 1.7-3.7 3.1 2.5 2.8 4.7-4.2 1.5 1.7-6.6 5.9z" />
<path
d="m48.5 13.2c1.6-1 3.6-1.5 5.5-1.1l-.1 2.3c-1.3-.2-2.9 0-4.1.7-2.7 1.6-2.9 4.4-1.5 6.6 1.4 2.3 4.1 3.5 6.7 1.9 1.3-.8 2.2-2.2 2.6-3.7l2.1.9c-.4 1.7-1.4 3.5-3.6 4.9-3.8 2.3-7.9 1-10.1-2.5-2.1-3.5-1.2-7.8 2.5-10z" />
<path
d="m60.3 7.4 2.4-.8 2 5.7 6.1-2.1-2-5.7 2.4-.8 4.7 13.3-2.4.8-1.9-5.6-6.1 2.1 1.9 5.6-2.4.8z" />
<path
d="m79.9 1.7 2.6-.3 6.3 7.5c.6.8 1.4 2.1 1.4 2.1s-.3-1.3-.4-2.2l-.9-8.1 2.5-.3 1.6 14-2.5.3-6.3-7.5c-.6-.8-1.4-2.1-1.4-2.1s.3 1.3.4 2.2l.9 8.1-2.6.3z" />
<path
d="m106.8.7c4.3.5 7 4 6.5 8-.5 4.2-3.8 7.1-8.1 6.6s-6.9-4-6.5-8.2c.5-4 3.8-6.9 8.1-6.4zm-1.3 12.3c2.7.3 4.9-1.7 5.2-4.5.3-2.7-1.4-5.1-4.1-5.4s-4.9 1.6-5.2 4.3c-.3 2.9 1.4 5.3 4.1 5.6z" />
<path d="m121.6 3.7 2.5.8-3.6 11.4 5.9 1.9-.7 2.1-8.3-2.6z" />
<path
d="m141.9 11.7c3.8 2.1 4.9 6.3 3 9.9-2 3.7-6.2 5.1-10 3s-4.9-6.4-2.9-10.1c1.9-3.5 6.1-4.9 9.9-2.8zm-6 10.8c2.4 1.3 5.2.3 6.5-2.2 1.3-2.4.6-5.2-1.8-6.5s-5.1-.4-6.5 2c-1.2 2.5-.6 5.4 1.8 6.7z" />
<path
d="m159.7 24.4c1.4 1.2 2.5 2.9 2.8 4.9l-2.2.6c-.1-1.2-.9-2.6-1.9-3.5-2.4-2.1-5.1-1.6-6.9.4-2 2.3-1.8 5.2.2 7 1 .9 2.3 1.3 3.6 1.3l1.1-1.2-1.6-1.4 1.5-1.7 3.4 3-5 5.6-1.6-1.5.5-.5c.2-.2.4-.4.4-.4-1.3.1-2.9-.5-4.1-1.6-2.8-2.5-3.3-6.8-.3-10.1 2.5-3.4 6.9-3.7 10.1-.9z" />
<path
d="m164.2 41.6 3.7-8.8 1.8 2.3-2 4.3c-.4.9-1 1.8-1 1.8s1.1-.3 2-.5l4.7-.8 1.8 2.3-9.4 1.2-4.7 3.6-1.6-2z" />
</g>
</svg>
</div>
<div class="circle">
</div>
</div>
</section>
I have a grid with 3 columns: I need the first 1 column to always take the smallest amount of space possible, so the second column is tight with the text. I also need to cover a situation where the text of the first column can be huge:
Here I want the CSS to be exactly as is, since it's perfect. The CSS is really simple:
.container {
display: grid;
}
.children {
grid-row: 1;
}
How can I achieve the desired result with css grid?
Codepen link for minimal case: https://codepen.io/ilia-reingold/pen/RwrdELR
Update: adding code ->
.margin-top {
margin-top: 1rem;
}
.row {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.title-container {
display: grid;
// grid-template-columns: auto 10% 10%;
}
.title {
grid-row: 1;
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 36px;
color: #000000;
}
.container {
grid-row: 1;
}
.buttons {
grid-row: 1;
}
.description {
font-family: Rubik;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
color: #404A56;
}
.end {
justify-content: flex-end;
}
.container {
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin: 0 0.5rem;
align-items: center;
}
<div data-v-31045a46="" class="pagetop row margin-top">
<div data-v-31045a46="" class="title-container row">
<div data-v-31045a46="" class="text-ellipsis title"> Hardik's Favourite </div>
<div data-v-52c45aaf="" data-v-31045a46="" class="container">
<div data-v-52c45aaf="" class="status-button read-only">
<svg data-v-52c45aaf="" width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 7.5H14C15.1 7.5 16 8.4 16 9.5V19.5C16 20.6 15.1 21.5 14 21.5H2C0.9 21.5 0 20.6 0 19.5V9.5C0 8.4 0.9 7.5 2 7.5H3V5.5C3 2.74 5.24 0.5 8 0.5C10.76 0.5 13 2.74 13 5.5V7.5ZM8 2.5C6.34 2.5 5 3.84 5 5.5V7.5H11V5.5C11 3.84 9.66 2.5 8 2.5ZM2 19.5V9.5H14V19.5H2ZM10 14.5C10 15.6 9.1 16.5 8 16.5C6.9 16.5 6 15.6 6 14.5C6 13.4 6.9 12.5 8 12.5C9.1 12.5 10 13.4 10 14.5Z" fill="black" fill-opacity="0.54"></path>
</svg>
<span data-v-52c45aaf="">Read-only</span>
</div>
<div data-v-52c45aaf="" class="status-button shared pointer">
<svg data-v-52c45aaf="" width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 7C8.93 7 10.5 5.43 10.5 3.5C10.5 1.57 8.93 0 7 0C5.07 0 3.5 1.57 3.5 3.5C3.5 5.43 5.07 7 7 7ZM0 12.25C0 9.92 4.66 8.75 7 8.75C9.34 8.75 14 9.92 14 12.25V14H0V12.25ZM7 10.75C5.21 10.75 3.18 11.42 2.34 12H11.66C10.82 11.42 8.79 10.75 7 10.75ZM8.5 3.5C8.5 2.67 7.83 2 7 2C6.17 2 5.5 2.67 5.5 3.5C5.5 4.33 6.17 5 7 5C7.83 5 8.5 4.33 8.5 3.5ZM14.04 8.81C15.2 9.65 16 10.77 16 12.25V14H20V12.25C20 10.23 16.5 9.08 14.04 8.81ZM16.5 3.5C16.5 5.43 14.93 7 13 7C12.46 7 11.96 6.87 11.5 6.65C12.13 5.76 12.5 4.67 12.5 3.5C12.5 2.33 12.13 1.24 11.5 0.35C11.96 0.13 12.46 0 13 0C14.93 0 16.5 1.57 16.5 3.5Z" fill="#6E6F73"></path>
</svg>
<span data-v-52c45aaf="">Shared with team</span>
</div>
</div>
<div data-v-31045a46="" class="buttons row end">
<button data-v-5ea9ad22="" data-v-31045a46="" data-testid="button" class="button">
<div data-v-5ea9ad22="" class="centered">
<svg data-v-31045a46="" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-5ea9ad22="">
<rect x="7" y="7" width="14" height="14" rx="2" stroke="black" stroke-width="2"></rect>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 2H13C13.5523 2 14 2.44772 14 3V6H16V3C16 1.34315 14.6569 0 13 0H3C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H6V14H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2Z" fill="black"></path>
</svg>
<span data-v-5ea9ad22=""> Copy </span>
</div>
</button>
<button data-v-5ea9ad22="" data-v-31045a46="" data-testid="button" class="disabled button">
<div data-v-5ea9ad22="" class="centered">
<svg data-v-31045a46="" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-5ea9ad22="">
<path d="M13.7728 4.22774L8.96019 0.15672C8.53894 -0.199663 7.875 0.0896491 7.875 0.643255V2.78753C3.4828 2.83679 0 3.6991 0 7.77658C0 9.42231 1.08229 11.0527 2.27864 11.9051C2.65196 12.1711 3.18402 11.8373 3.04637 11.4061C1.80649 7.52179 3.63445 6.4906 7.875 6.43084V8.7857C7.875 9.34016 8.53946 9.62819 8.96019 9.27223L13.7728 5.20081C14.0755 4.94469 14.0759 4.48421 13.7728 4.22774Z" fill="#8d8f93"></path>
</svg>
<span data-v-5ea9ad22=""> Share </span>
</div>
</button>
<div data-v-31045a46="" role="listbox" tabindex="0" class="ui dropdown dropdown icon disabled-grey-btn" compact="compact">
<i aria-hidden="true" class="ellipsis horizontal icon"></i><span class="sizer"></span>
<div tabindex="-1" class="menu transition"></div>
</div>
</div>
</div>
</div>
You can achieve that by using grid-template-columns property.
.container {
display: grid;
grid-template-columns:20% 40% 40%; //It's just a hit, try on your own
}
You can add this to your CSS
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Result: