this is my first time posting I'm fairly new in front-end web development. I'm having a hard time positioning some of my elements, especially this one every time I change something it doesn't meet my desired position for my button I just need to center it.
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1B244A;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: 'cursed timer', sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9AABD8;
border-radius: 5px;
color: white;
}
.newGame {}
.newGame button {}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I'm trying to figure out how to center the new game button that I put in a div class called newGame it always stays in the right corner.
Try this and see if it works for you, and you can always change the values to match the position of button according to your need.
.newGame{
position: absolute;
left: 15%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
}
I guess this is what you are expecting
Use flex property align-items: center; to center any div element vertically when flex-direction in horizontal
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1b244a;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: "cursed timer", sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9aabd8;
border-radius: 5px;
color: white;
}
.newGame {
display: flex;
align-items: center;
}
.newGame button {
}
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Related
I used margin on other elements successfully, yet when I try to do this with #searchbarcontainer it moves the entire page down. I'm trying to center it slightly below the middle of the page, but I can't work my way around this problem. I am trying to make somewhat of a Google clone and I'm new to HTML and CSS. Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
#nav {
display: flex;
justify-content: flex-end;
margin-top: -40px;
margin-right: -5px;
padding: 20px;
}
.child {
padding: 15px;
}
.link {
color: rgb(95, 91, 91);
text-decoration: none;
}
.link:hover {
color: black;
}
#logo {
margin-top: 110px;
text-align: center;
}
#searchbarcontainer {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="form">
<form action="https://google.com/search">
<div id="searchbarcontainer">
<input id="searchbar" type="text" name="q">
</div>
<div id="submitcontainer">
<input id="submit" type="submit" value="Google Search">
</div>
</form>
</div>
<div id="nav">
<div class="child">
<button type="button" class="btn btn-light"><a class="link" href="images.html">Image Search</a></button>
</div>
<div class="child">
<button type="button" class="btn btn-light"><a class="link" href="advanced.html">Advanced Search</a></button>
</div>
</div>
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
Your layout doesnt allow for the search bar container to be moved without affecting the entire page. You say that you want it to be lower, but as you can see in the picture, it has no where to go except to move everything down.
If you wanted to move it down you have to change it so that the search input and the "google search" button will be in the same container and center it that way
when writing html, you have to write what you want to see in vertical order in your website
you've written from bottom to top instead
you've also made a lot of unnecessary elements
here's a somewhat streamlined version
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "sans-serif";
}
input {
outline: 0;
border: 0.3vh solid #bbb;
font-size: 1.6vh;
}
nav {
width: 100%;
height: 6.7vh;
border-bottom: 0.2vh solid #bbb;
display: flex;
justify-content: flex-end;
padding: 0 3vh;
}
nav>div {
height: 6.7vh;
background: #000;
display: flex;
align-items: center;
justify-content: space-around;
}
nav>div>a {
color: black;
text-decoration: none;
font-size: 1.6vh;
background: yellow;
}
nav>div>a:first-child {
margin-right: 1vh;
}
section {
height: 93.3vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section>img {
width: 45vw;
height: 15vh;
object-fit: contain;
}
section>form {
width: 45vw;
display: flex;
justify-content: space-around;
margin-top: 3vh;
}
section>form>input[type="text"] {
padding: 1vh;
border-radius: 1vh;
width: 65%;
}
section>form>input[type="submit"] {
width: 25%;
border-radius: 1vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<nav>
<div>Image SearchAdvanced Search</div>
</nav>
<section>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<form action="https://google.com/search">
<input id="searchbar" type="text" name="q" />
<input id="submit" type="submit" value="Search" />
</form>
</section>
</main>
</body>
</html>
I am fairly new to coding. I am working on recreating the Google home page for The Odin Project and I cannot seem to get the images to sit right in the search bar.
Thus far all of my code and formatting has been done in HTML. I was struggling how to do CSS and push it via Git. anyway...
I got the magnifying glass to sit in the proper spot, but when I went to add the microphone image, it overlaps the magnifying glass. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
I tried changing the class, giving it an id, setting the position to relative and margin right as auto, but i cannot seem to get it to move over to the right side of the search bar.
Additionally, the buttons below the search bar are stuck together. I had each button as its own, but the moment I added them to the same div they have become ajoined and when I try to separate them, the only way i can get them on them aligned is by styling them to the same row. Margin does not help split them apart, I even tried to get them in separate columns no dice. I am really frustrated as i made it pretty far in a day just using HTML. I would like to keep it HTML until I learn how to push CSS to GitHub via Git.
Thank you in advance!!!
You've set the fake-input to position: relative and the image to position: absolute which is already correct, but for the img#mic you need to set it's position right and not left to make it appear in the right side of the fake-input, so I add some style like this
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
And for the button, it's working if you add the margin for the button like in the updated snippet below
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
margin: 10px;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
you should give position :relative to class (fake-input);
then give position :absolute to (search.png or mic.
here is a screenshot of my website i want to adjust the image to be on the right of the page as indicated by the arrow below(float:right; didn't work).Also, as for (float:left;) i want on the left side to add some text as shown in the image below at the left side.Lastly for the circled part on the photo it is not clickable for some reason :(((
i want the picture to stick to the right side of the page as the arrow showing below::
the css code ::
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
}
.hp_div{
background-color: pink;
}
.hp_div section#hpimg{
float: left;
}
.hp_div section#hptext{
float: right;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
.form-inline {
display: flex;
}
.homeage_but {
width: 100%;
height: auto;
}
.mark_colour{
background-color: pink;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
background-color: pink;
}
.Hsection{margin-top:0px!important;margin-bottom:0px!important}
.Hcontent{max-width:980px;margin-left:auto;margin-right:auto}
.centered-element{text-align:center;}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code::
<!DOCTYPE html>
<!--F04 :moudhi al.gowiez-->
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
<div class="icons">
<a herf=""><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;"></i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="hp_div">
<!-- Slide Show -->
<section id="#hpimg">
<img class="mySlides" src="pink-velvet-cake-thumb_1_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="snicker-chocolate-cake-A_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="torta-unicorn.jpg" style="width:660; height: 660;">
</section>
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
<section id="#hptext">
<h5>welocome</h5>
<p>fkld;flfk;sk</p>
</section>
</div>
</body>
</html>
Two things I notice right away:
<section id="#hpimg"> & <section id="#hptext">
You'll need to remove the '#' from these id declarations in order for your CSS to affect them.
And the reason your links aren't working:
<a herf="">...</a>
'herf' isn't the same as 'href'. Always check for typos ;)
EDIT: It seemed like one of your edits indicated you wanted the image moved to the left instead of the right. I've updated the little fiddle I made, basically just changing float:left to float:right.
Why don't you use bootstrap the col-md for the text and image
For example
<div class="container">
<div class="row">
<div class="col-md-7">
<p> Text </p>
</div>
<div class="5">
<img href="cake img">
</div>
</div>
</div>
So, I want to write a fan page for NerdHub (YouTube channel) and, I'm stuck because the "Search..." isn't in one line with the logo (of NerdHub).
Now as you can see it looks like this:
It should look like this:
I read a duplicate, but display: inline-block; didn't help me either.
All the files: https://drive.google.com/drive/folders/1Fl4MIf6otZq8w_xm17GD5NY9wbj5pM7G?usp=sharing
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
</div>
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="adbytelekom">
<p class="a">Remove Ads</p>
<img src="adbytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
<style type="text/css">
body {
background-color: black;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
#fel {
color: white;
text-decoration: none;
}
</style>
</body>
</html>
Simple way is to use flex as above answer mentioned. You can align the items inside the box with align-items property. Simply add another div around the elements you wish to have on one line and give it following style:
#wrapper {
display: flex;
align-items: center;
}
Also since you want to have logo to the left you should have it before the search bar.
<div id="wrapper">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
</div>
The simplest solution will be to add display:flex.
By default, flex renders its immediate children in a row.
I would encourage you to read more about flex properties here.
body {
background-color: black;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
#fel {
color: white;
text-decoration: none;
}
.flex{
display:flex;
}
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
</div>
</div>
<div class="flex">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
<div id="adbytelekom">
<p class="a">Remove Ads</p>
<img src="adbytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
</div>
</body>
</html>
Try this one instead of your code...
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
</div>
</div>
<div id="asd">
<form><input type="text" name="1" value="Keresés..."></form>
</div>
<div id="reklambytelekom">
<p class="a">Remove Ads</p>
<img src="reklambytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
<!--file:///D:/Don%C3%A1t/Programoz%C3%A1s/wamp/nerdhub.com/Nerdhub.html -->
<style type="text/css">
body {
background-color: black;
}
.con,#asd{float: left;}
form{width: 80%;margin: 0 auto;}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
margin: 15px 0;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
.con > * {
display: inline-block;
}
#fel {
color: white;
text-decoration: none;
}
</style>
</body>
</html>
* {
box-sizing: border-box;
position: relative;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
header {
align-items: center;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
grid-gap: 140px;
overflow: hidden;
padding: 20px 60px;
width: 100%;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
section {
width: 100%;
}
aside {
padding: 30px;
position: absolute;
right: 0;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
.con>* {
display: inline-block;
}
#fel {
color: white;
text-decoration: none;
}
<div class="con">
<div id="fel"></div>
</div>
<header>
<div id="img">
<img src="https://drive.google.com/uc?export=view&id=1TR9UwuFvWO7ZAFkYjl9LQ5wNEKpvOzEM" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Keresés..."></form>
</div>
</header>
<section>
<aside>
<div id="reklambytelekom">
<p class="a">Remove Ads</p>
<img src="https://drive.google.com/uc?export=view&id=14CKiNux7_cpRXiM48Sajr7DV0H5ikjFC">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
</aside>
</section>
I created a footer and used fontawesome icons with border.
On the following code I display the items and intend to have them as the picture shows
I was nearly there until I found that when I resize the screen, the icons also shrink like the photo show
Here my styling:
$footer: #464646;
.footer-font-awesome{
font-family: 'FontAwesome';
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid white;
border-radius: 50%;
line-height: 40px;
text-align: center;
font-size: 18px;
text-indent: 0;
}
footer#colophon{
background-color: $footer;
color: white;
padding: 20px 40px;
ul,li,p{
margin: 0;
}
.site-info{
.textwidget {
display: flex;
justify-content: center;
div.box{
display: flex;
width: 100%;
max-width: 25%;
align-items: center;
p{
padding-left:8px;
}
}
.email,
.phone,
.address{
padding-right: 40px;
}
.email{
&:before{
#extend .footer-font-awesome;
content: '\f003';
}
}
.phone{
&:before{
#extend .footer-font-awesome;
content: '\f095';
}
}
.back-top{
justify-content: center;
}
.address{
&:before{
#extend .footer-font-awesome;
content: '\f041';
}
}
}
}
}
Here my html structure:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<section id="black-studio-tinymce-33" class="widget widget_black_studio_tinymce">
<div class="textwidget">
<div class="box email">
<p>Email<br> <span class="unbold"><a>info#web2web.co.za</a></span></p>
</div>
<div class="box phone">
<p>Phone<br> <span class="unbold">021 823 8384</span></p>
</div>
<div class="box address">
<p>Address<br> <span class="unbold">Century City, Cape Town</span></p>
</div>
<div class="box back-top">
<p><span class="unbold"><a class="back-top">To the top</a></span></p>
</div>
</div>
</section>
</div><!-- .site-info -->
</footer>
How can I style my icons as the first pictures shows with no problem even when I resize?
Hope you can edit from my snippet
I would just set min-width on .footer-font-awesome
.footer-font-awesome{
font-family: 'FontAwesome';
display: inline-block;
width: 40px;
min-width: 40px; // This...
height: 40px;
border: 1px solid white;
border-radius: 50%;
line-height: 40px;
text-align: center;
font-size: 18px;
text-indent: 0;
}