I'm attempting to make the social logos on the same line as the "APKHub" text. I have tried aligning it properly and messed with positionings but nothing has been working. I am unsure why It is like this and I run into this issue a lot and haven't really found a fix. All the code is below and an image aswell.
<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">
<script src="https://kit.fontawesome.com/dd13dde450.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- -->
<title>APKHub - Free APK Downloads</title>
</head>
<body>
<div class="navbar">
<h1>APKHub</h1>
<div class="links">
<i class="fa-brands fa-discord"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
background-color: #141523;
}
.navbar {
border-radius: 5px;
padding: 10px;
background-color: #1d1e31;
}
.navbar h1 {
margin-left: 5px;
font-family: 'Roboto', sans-serif;
color: white;
}
.links {
text-align:right;
}
.links i {
font-size: 30px;
}
</style>
</html>```
You might want to take a look at flexbox. There are many ways you can use flexboxes, but I've tried achieve what you described here:
<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">
<script src="https://kit.fontawesome.com/dd13dde450.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- -->
<title>APKHub - Free APK Downloads</title>
</head>
<body>
<div class="navbar">
<h1>APKHub</h1>
<div class="links">
<i class="fa-brands fa-discord"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
background-color: #141523;
}
.navbar {
border-radius: 5px;
padding: 10px;
background-color: #1d1e31;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 20px;
}
.navbar h1 {
margin-left: 5px;
font-family: 'Roboto', sans-serif;
color: white;
}
.links i {
font-size: 30px;
}
</style>
</html>
display: flex; Makes the navbar a flex container.
flex-direction: row; Makes the children elements in the container line up from left to right.
align-items: center; Makes all the items line up on the middle of the axis opposite to what you put in flex direction.
column-gap: 20px; Creates a 20px gap between each flex item.
just add to .navbar
display: flex; - Places elements in flexbox form
justify-content: space-between; - Positions the elements horizontally with space between them
align-items: center; - Places the elements vertically in a balanced way
<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">
<script src="https://kit.fontawesome.com/dd13dde450.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- -->
<title>APKHub - Free APK Downloads</title>
</head>
<body>
<div class="navbar">
<h1>APKHub</h1>
<div class="links">
<i class="fa-brands fa-discord"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
background-color: #141523;
}
.navbar {
border-radius: 5px;
padding: 10px;
background-color: #1d1e31;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar h1 {
margin-left: 5px;
font-family: 'Roboto', sans-serif;
color: white;
}
.links {
text-align:right;
}
.links i {
font-size: 30px;
}
</style>
</html>
As for me - nearly ideal solution for headers based on flex :
body {
margin: 0;
padding: 0;
background-color: #141523;
}
.navbar {
border-radius: 5px;
padding: 10px;
background-color: #1d1e31;
display:flex;
align-items:center; /* vertical alignment */
gap: 10px; /* some spaces between all elements */
}
.navbar h1 {
margin-left: 5px;
margin-right: auto; /* force to 'push' avarything on the right */
font-family: 'Roboto', sans-serif;
color: white;
}
.navbar i {
font-size: 30px;
}
<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">
<script src="https://kit.fontawesome.com/dd13dde450.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- -->
<title>APKHub - Free APK Downloads</title>
</head>
<body>
<div class="navbar">
<h1>APKHub</h1>
<i class="fa-brands fa-discord"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</body>
</html>
It is also can be achieved with display:inline for header and .links and some additional styles to .links ... but i don't want to mess with it (:
Related
i am using grid to make navigation menu
here is the screen shot of original template Before Responsive
After responsive
Now this is my code that i am trying to make mobile responsive
Here it is index.html
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#200&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav class="navigation">
<div class="navigation-logo">
<img src="assets/images/logo.svg" alt="logo" />
</div>
<div class="navigation-menu">
Home
News
Popular
Trending
Category
</div>
</nav>
</body>
</html>
And here is my style.css file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navigation {
display: inline-grid;
grid-template-rows: 3rem;
grid-template-columns: 44rem;
margin: 2rem 2rem;
width: 5vw;
/* overflow-x: hidden; */
}
.navigation-logo {
max-width: 5vw;
}
.navigation-menu {
margin: -2rem 50rem;
width: 30vw;
/* overflow: hidden; */
}
.navigation-menu a {
text-decoration: none;
margin: 0 10px;
color: lightslategray;
}
.navigation-menu a:hover {
color: rgb(227, 102, 56);
}
#media only screen and (min-width: 20vw) and (max-width: 20vw) {
.navigation {
background-color: lightbulb;
}
}
Trying to make them responsive Need your help and guidance Thank you
I do not understand why my HTML content is overflowing the viewport both vertically and horizontally. I can scroll in both directions, even though there is no extra content. I have tried changing the width and height on the div of the parents, but that does not fix the problem. Here is my code:
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
background-color: #111;
color: #fff;
text-align: center;
}
h1 {
padding-top: 200px;
font-family: 'Rubik Microbe', cursive;
font-weight: normal;
font-size: 200px;
}
p {
font-family: 'Megrim', cursive;
font-size: 50px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SITE</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Megrim&family=Rubik+Microbe&display=swap" rel="stylesheet">
<!-- -->
</head>
<body>
<main>
<h1>SITE</h1>
<p>coming soon...</p>
</main>
<script src="index.js"></script>
</body>
Any ideas?
The main problem is padding-top: 200px; on the h1 element. It is not necessary to position elements by using high values of padding or margin, for example.
So, I took off the padding from h1 and added flexbox attributes to body and your layout works with the h1 and p elements now centered in the page.
display:flex;
flex-direction:column;
justify-content: center;
height: 100vh;
height: 100vh; sets the height of the body to the viewport height.
Here, you can find a lot of links to flexbox, in particular the link to A Complete Guide to Flexbox should be of interest.
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
background-color: #111;
color: #fff;
text-align: center;
display:flex;
flex-direction:column;
justify-content: center;
height: 100vh;
}
h1 {
font-family: 'Rubik Microbe', cursive;
font-weight: normal;
font-size: 200px;
}
p {
font-family: 'Megrim', cursive;
font-size: 50px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SITE</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Megrim&family=Rubik+Microbe&display=swap" rel="stylesheet">
<!-- -->
</head>
<body>
<main>
<h1>SITE</h1>
<p>coming soon...</p>
</main>
<script src="index.js"></script>
</body>
You can just try overflow: hidden in your body section styling.
body { overflow: hidden;}
I want the image with the class "userIcon" to center in height and also align it at the right side of the navbar. I tried many different things but I didn't find a result. With float: right is the image right, but not centered in height anymore.
body {
margin: 0;
}
.navbar {
width: 100%;
height: 5%;
background-color: rgb(59, 59, 235);
}
.linkSaverIcon {
margin-left: .5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-right: 1%;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap" rel="stylesheet" />
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img class="linkSaverIcon" src="../assets/icons/websiteIcon.svg" alt="Link Saver Icon" href="home.html" />
<h1 class="titleFont">Link Saver</h1>
<img src="../assets/icons/userIcon.svg" alt="userIcon" class="userIcon" />
</nav>
</body>
</html>
This should work nicely for you. Use flex with align-items: center; to get them center vertically. Then use margin-left: auto; on userIcon to get it to the far right.
A non-margin solution would be to nest the LinkSaverIcon img and the h1 in a div, and set that div to either display: flex with align-items: center; or inline-block. Then nest the userIcon in its own div, and use justify-content: space-between; on navbar.
body {
margin: 0;
}
.navbar {
width: 100%;
background-color: rgb(59, 59, 235);
display: flex;
align-items: center;
}
.linkSaverIcon {
margin-left: .5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-left: auto;
margin-right: .5em;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap" rel="stylesheet" />
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img class="linkSaverIcon" src="https://picsum.photos/40/40" alt="Link Saver Icon" href="home.html" />
<h1 class="titleFont">Link Saver</h1>
<img src="https://picsum.photos/40/40" alt="userIcon" class="userIcon" />
</nav>
</body>
</html>
body {
margin: 0;
}
.navbar {
display: flex;
align-items: center;
width: 100%;
height: 5%;
background-color: rgb(59, 59, 235);
}
.linkSaverIcon {
margin-left: 0.5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-left: auto;
margin-right: 1%;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: "Ubuntu", sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: "Ubuntu", sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img
class="linkSaverIcon"
src="https://picsum.photos/40/40"
alt="Link Saver Icon"
href="home.html"
/>
<h1 class="titleFont">Link Saver</h1>
<img
src="https://picsum.photos/40/40"
alt="userIcon"
class="userIcon"
/>
</nav>
</body>
</html>
How about this, add display:flex; align-items:center in .navbar and margin-left: auto on .userIcon, I use picsum to replace the empty asset.
.usericon{margin-right:auto;}
this Might do the trick,(Edit) Sorry Messed up first time.
How can I center my icons in the middle of the page and place the text under the icons?
I tried 4 hours and it didn't work ; It would be great if it were based on the Flex box and in the middle of the DIV,
<pre>
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.row{
display: flex; /* مهمة */
justify-content: space-between;
.servics{
height: 100%;
width: 100%;
padding-top: 2%;
text-align: center;
margin: 10% auto;
/* https://www.youtube.com/watch?v=wfaDzSL6ll0 */
}
.icons{
display: flex;
}
.child{
width: 150px;
height: 150px;
background-color: transparent;
border: 4px solid #87CEEB;
border-radius: 100%;
font-size: 50px;
text-align: center;
}
.icon1, .icon2, .icon3, .icon4{
color: rosybrown;
line-height: 150px;
}
</style>
</head>
<body>
<section class="servics">
<h1>Unsere Leistungen</h1>
<div class="row">
<div class="icons">
<div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
<div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
<div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
<div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
</div>
</div>
</section>
</body>
</html>
</pre>
The following code might help
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.servics{
height: 100%;
width: 100%;
padding-top: 2%;
text-align: center;
margin: 10% auto;
/* https://www.youtube.com/watch?v=wfaDzSL6ll0 */
}
.icons{
display: flex;
justify-content: center;
}
.child{
width: 150px;
height: 150px;
background-color: transparent;
border: 4px solid #87CEEB;
border-radius: 100%;
font-size: 50px;
text-align: center;
}
.icon1, .icon2, .icon3, .icon4{
color: rosybrown;
line-height: 150px;
}
</style>
</head>
<body>
<section class="servics">
<h1>Unsere Leistungen</h1>
<div class="icons">
<div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
<div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
<div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
<div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
</div>
</div>
</section>
</body>
</html>
for put any thing in middle of the page you can use >>
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
and is one more way to put text under icon ,
use ur border style on i tag :)
looc at this >>
.ur-icon{
border: & & &;
border-radius: &;
}
looc ^^^ i used border style in icon not div(child icon#)
and after u can put with and height
and for spaces use padding / margin
have nice time . 👋😀
Try this one: its flex layout method. In the past it was a struggle to center page to the middle, nowadays it's changed. Remove all your code in style and replace with the code below:
/* CSS */
body{
display: flex;
justify-content: center;
background: orange;
align-items: center;
height: 100vh;
}
.icons *{
display: inline-block;
}
.servics{
text-align: center;
}
.add-cart-button
{
width:205px;
height:56px;
border-radius: 28px;
background-color: #EC7F4A;
color: #ffff;
font-family: Roboto;
}
.add-cart-button-icon
{
color: #232323;
float: right;
font-size: 40px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="add-cart-button">
<span>Add to Cart</span><i class="fa fa-plus-circle fa-6 add-cart-button-icon" aria-hidden="true"></i>
</button>
I'm using Bootstrap4 doubt in button that i need to display button along with fontawosome icon.can any one please tell me to do it.
Expected image
Actual output i got now
Image of Actual output i got now
You can simply add <i> tag inside button.
EDIT: I've added your code to same snippet. Just adding line-height: 40px; to add-cart-button class provides the alignment fix.
.round-btn {
border-radius: 19px !important;
}
.add-cart-button {
width: 205px;
height: 56px;
border-radius: 28px;
background-color: #EC7F4A;
color: #ffff;
font-family: Roboto;
line-height: 40px;
}
.add-cart-button-icon {
color: #232323;
float: right;
font-size: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-warning round-btn">Warning<i class="pl-2 fa fa-plus-circle"></i></button>
<button class="add-cart-button">
<span>Add to Cart</span><i class="fa fa-plus-circle fa-6 add-cart-button-icon" aria-hidden="true"></i>
</button>
</div>
</body>
</html>