I am facing problem with mediaquery. I tried design on different devices with chrome development tools. But can't find any help to solve the problem.
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#secondary-slider', {
type : 'loop',
perPage : 1,
autoplay : true,
pauseOnHover: true,
interval : 4000
} ).mount();
} );
.header{
position: relative;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-text{
text-align: center;
font-family: monospace;
font-size: 22px;
}
.header .img{
float: left;
margin-left: 10px;
}
.header .contact-us{
float: right;
}
.fa-2x{
font-size: 24px;
color: black;
}
.container{
width: 100%;
padding: 0px;
}
.splide__slide img {
width : 100%;
height: auto;
object-fit: cover;
}
#secondary-slider{
display: flex;
width:100%;
height:100%;
}
.header .submit{
float: right;
}
.contact-us .email{
margin-right: 20px;
}
#media only screen and (max-width: 600px){
body {background: red;}
.splide__slide img {
width : 100%;
height: 100%;
}
.header-text{
text-align: center;
font-family: monospace;
font-size: 22px;
margin-top: 10px;
}
i{
vertical-align: middle;
}
.contact-us .email{
margin-right: 2px;
}
}
<html>
<head>
<title>
Akhil Dali
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/css/splide.min.css"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="header">
<a class="img" href="https://instagram.com/show_house_full" target="_blank"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a>
<h2 class="header-text">Show House Full</h2>
<div class="contact-us">
<a class="email" href="mailto:ashishpise111#gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i></a>
<a class="whatsapp" href="tel:7666149649"><i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</nav>
<div id="secondary-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</li>
<li class="splide__slide">
<img src="https://static.toiimg.com/thumb/msid-24183773,width-1070,height-580,resizemode-75,imgsize-24183773,pt-32,y_pad-40/24183773.jpg">
</li>
<li class="splide__slide">
<img src="https://i.pinimg.com/originals/ca/76/0b/ca760b70976b52578da88e06973af542.jpg">
</li>
</ul>
</div>
</div>
</body>
<script>
</script>
</html>
I just want proper mediaquery and explanation about mediaquery which will help me to understand how to counter if i face similar problems.
You use media queries like this:
CSS
#media screen and (max-width: 860px) {
#header {font-size: 20px;} /* random rules */
}
HTML
Place this in the of your document.
<meta name="viewport" content="width=device-width" />
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My websites sidebar doesn't work on mobile. If you wanna see what i mean, go to Zinexium. I don't know what to do, im new to html. The code.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
:root {
--sidebar-width: 4.5em;
}
.sidebar {
background-color: #333;
position: fixed;
transition: width 0.2s ease;
}
.sidebar nav {
height: 100%;
}
.sidebar .sidebar__nav {
display: flex;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .sidebar__nav .sidebar__nav__link {
align-items: center;
color: #bbb;
display: flex;
padding-left: 20px;
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.sidebar .sidebar__nav .sidebar__nav__link:hover {
background-color: rgba(0, 0, 0, 0.15);
color: #80f;
}
.sidebar .sidebar__nav .sidebar__nav__text {
display: none;
margin-left: 10px;
margin-right: auto;
white-space: nowrap;
}
.sidebar .sidebar__nav i {
align-items: center;
display: flex;
justify-content: center;
}
#media (max-width: 572px) {
.sidebar {
bottom: 0;
width: 100%;
}
.sidebar .sidebar__nav {
justify-content: center;
}
.sidebar .sidebar__nav .sidebar__nav__link {
height: 100%;
padding: 0.75em;
}
.sidebar .sidebar__nav i {
font-size: 2rem;
}
}
#media (min-width: 572px) {
.sidebar {
height: 100vh;
left: 0;
width: var(--sidebar-width);
}
.sidebar:hover {
width: 14rem;
}
.sidebar .sidebar__nav {
flex-direction: column;
}
.sidebar .sidebar__nav .sidebar__nav__link {
padding: 1em;
}
.sidebar:hover .sidebar__nav .sidebar__nav__text {
display: inline;
}
.sidebar .sidebar__nav i {
font-size: 2.5rem;
}
}
#media (max-height: 434px) {
.sidebar {
overflow-y: scroll;
}
}
:root {
--sidebar-width: 4.5em;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto';
}
* {
outline: none;
box-sizing: border-box;
}
.main {
margin-left: auto;
margin-right: auto;
max-width: 992px;
padding: 2em 1.5em;
}
.main h2 {
font-size: 2em;
margin-top: 0px;
}
.main p {
color: #444;
font-size: 1.25em;
line-height: 2;
text-align: justify;
}
#media (min-width: 572px) {
.main {
margin-left: var(--sidebar-width);
}
}
#media (min-width: 992px) {
.main {
padding: 2.5em;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
p {
font-size: 34px;
}
.wrapper {
position: relative;
/* height: 200px; */
width: 80%;
margin: auto;
overflow: auto;
}
.main {
margin: auto;
}
.column {
float: left;
width: 33.3%;
margin: 4em;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
width: 400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card p {
font-size: 150%; /* changes font size inside of cards*/
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
.container {
padding: 0 16px;
}
.container::after,
.row::after {
content: '';
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.rainbow {
text-align: center;
text-decoration: underline;
font-size: 32px;
font-family: monospace;
letter-spacing: 5px;
}
.rainbow_text_animated {
background: linear-gradient(
to right,
#6666ff,
#0099ff,
#00ff00,
#ff3399,
#6666ff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow_animation 6s ease-in-out infinite;
background-size: 400% 100%;
}
#keyframes rainbow_animation {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
#rcorners1 {
border-radius: 25px;
background: #d3d3d3;
padding: 20px;
width: 300px;
height: 345px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
The snippet isn't the exact website, only the developers page. If you wanna see the actual page, go to "The code" i linked.
Thanks.
P.S. The snippet is missing some things, so go to the actual developers page if you wanna see it ig.
If by "doesn't work" you meant "is hiding under the content" ...the solution is to give it the z-index: 1 in your CSS:
.sidebar {
z-index: 1;
}
it will do the job.
I'm following This Guide on placing images side by side. On larger displays like PC's it looks fine:
But on mobile I get this:
Which is obviously not right, but the site does mention adding this for mobile support:
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
But when I add this it improves it:
But does not fix the problem, I need the images to be top to bottom and not side to side on mobile as shown in the Demo On The Site. How do I fix this?
Here is my HTML Script (It's a test so I understand it's bare bones):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="description" content="Ultra Gamer Text">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ultra Gamer test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<div class="row">
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Testimage.png" alt="https://example.com" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
</div>
</div>
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Placeholder.png" alt="https://example.com" style="width:300px;height:300px;" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Placeholder.png" alt="https://example.com" style="width:300px;height:300px;" target="_blank">
</a>
<footer>
</footer>
</body>
</html>
Here is my CSS code for the images:
a
{
/* Removes underlines from links */
text-decoration: none;
color: black;
}
/* When mouse is hovering over text */
a:hover
{
color: rgb(85, 85, 85);
text-decoration:none;
cursor:pointer;
}
/* When mouse is hovering over an image */
img:hover
{
filter: brightness(0.8);
}
body
{
font: 15px/1.5 Arial, Helvetica,sans-serif;
background-color: #f0f0f0;
padding: 0;
margin: 0;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 33.33%;
padding: 5px;
text-align: center;
width:90px
}
/* Clear floats after image containers */
.row::after
{
content: "";
clear: both;
display: table;
text-align: center;
}
.row
{
display: flex;
}
.column
{
flex: 33.33%;
padding: 5px;
}
.textLink
{
color: black;
}
#media screen and (max-width: 500px) {
.column {
float:inherit;
width: 100%;
}
}
footer
{
text-align: center;
padding: 12px;
}
so many changes need to make in you code please compare your code with mine. html and css both
*{
box-sizing: border-box;
}
a
{
text-decoration: none;
color: black;
}
a:hover
{
color: rgb(85, 85, 85);
text-decoration:none;
cursor:pointer;
}
img:hover
{
filter: brightness(0.8);
}
body
{
font: 15px/1.5 Arial, Helvetica,sans-serif;
background-color: #f0f0f0;
padding: 0;
margin: 0;
}
.row{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.column {
width: 33.33%;
padding: 5px;
text-align: center;
flex: 0 0 33.33%;
}
.textLink
{
color: black;
}
footer
{
text-align: center;
padding: 12px;
}
#media screen and (max-width: 500px) {
.column {
flex: 0 0 100%;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="description" content="Ultra Gamer Text">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ultra Gamer test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Testimage.png" alt="https://example.com" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
</div>
</div>
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Placeholder.png" alt="https://example.com" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
</div>
</div>
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Placeholder.png" alt="https://example.com" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
your have not complete head tag and mention your all body content in your head tag.
I want to decrease the space between "pricing", "how it works" and "features", as you can see here
I also know I can do that with margin but I tried a lot of different ways and it just don't come to mind on how to do that, so, it'd great if you could give me a hand.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin:15px 32px 0px 5px;
}
.nav-link{
position: relative;
float:right;
padding: 24px 40px 15px 20px;
}
#hero{
margin-top: 90px;
text-align: center;
}
#header{
overflow: hidden;
}
#email{
max-width: 275px;
width: 100%;
box-sizing: border-box;
padding:5px;
}
#form{
text-align: -webkit-center;
display: flex;
flex-direction: column;
}
.btn{
margin-top:13px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 150px;
width: 100%;
height: 30px;
background-color: #f1c40f;
padding: 0 20px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px;
border-radius: 2px;
cursor: pointer;
}
.flex{
display:flex;
margin-top: 80px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
.desc{
display: flex;
flex-direction: column;
justify-content: unset;
height: 125px;
width: 80vw;
padding: 41px 0px 0px 0px;
text-align: start;
}
.eighttwo, p{
padding: 0;
margin: 0;
}
.divisor{
margin-top: -40px;
}
.container{
width:100%;
max-width: 1000px;
}
a{
text-decoration: none;
color: #000;
}
#nav-bar{
display: flex;
background: #eee;
flex-direction: row;
}
#media screen and (max-width: 410px) {
#nav-bar {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
margin-top: 30px;
padding: 0 50px;
}
}
</style>
</head>
<body>
<header id="header">
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
<form id="form">
<input id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Get Started" class="btn">
<div class="container">
<section id="features">
<div class="flex two">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-battery-full"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
<section id="how-it-works">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</section>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
If you use justify-content: space-between; for your flex container and margin-left: auto; on the first of your links, the links will be moved as far right as their size and padding allows - see below. (BTW: Erase the float: left - it has no effect for flex items)
#nav-bar {
display: flex;
background: #eee;
flex-direction: row;
justify-content: space-between;
}
.nav-link {
padding: 24px 40px 15px 20px;
}
.nav-link:first-of-type {
margin-left: auto;
}
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
I just can't wrap my head around having text under icons. But I need the setup of the Icons left to right.
/* Typography */
html {
font-family: 'Roboto', sans-serif;
}
#media (min-width: 576px) {
html {
font-size: 14px;
}
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
#media (min-width: 992px) {
html {
font-size: 18px;
}
}
#media (min-width: 1200px) {
html {
font-size: 20px;
}
}
.icons-social i {
font-size: 3em;
}
/* Custom Styles */
main {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
padding: 0 30px;
text-align: center;
}
main > .intro {
font-family: 'Reem Kufi', sans-serif;
font-size: 3.75em;
font-weight: 600;
}
main > .tagline {
font-size: 1.5rem;
margin: 1.5rem 0;
font-weight: 100;
}
.icons-social i {
padding: 10px;
}
#icons-social {
margin: 0 auto;
width: 1050px;
height: 175px;
margin-top: 89px;
}
.icons_social {
width:50px;
float: center;
width: 100px;
height: 85px;
}
.icons_social span {
display:block;
}
.sidebar-social a:hover i.fa-main { color:cyan; }
.sidebar-social a:hover i.fa-LinkedIn { color:cyan }
.sidebar-social a:hover i.fa-Medium { color:cyan }
.sidebar-social a:hover i.fa-YouTube { color:cyan }
.sidebar-social a:hover i.fa-Facebook { color:cyan }
.sidebar-social a:hover i.fa-DarkJpeg { color:cyan }
.sidebar-social a:hover i.fa-Encrypted Crack { color:cyan }
.sidebar-social a:hover i.fa-Slack { color:cyan }
}
.devto {
margin-bottom: -0.20rem;
}
.devto svg {
margin-bottom: -0.20rem;
margin-left: 0.675rem;;
width: 2.65rem;
height: 2.65rem;
}
<!DOCTYPE html>
<html>
<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>John Modica | CybernetiX S3C</title>
<link rel="icon" href="favicon.ico" type="image/png" />
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi|Roboto:300" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<!-- <link rel="stylesheet" href="css/themes/indigo-white.css"> -->
<!-- <link rel="stylesheet" href="css/themes/green-white.css"> -->
<!-- <link rel="stylesheet" href="css/themes/red-white.css"> -->
<link rel="stylesheet" href="css/themes/grey-white.css">
<!-- <link rel="stylesheet" href="css/themes/white-indigo.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-blue.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-grey.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-red.css"> -->
<!-- <link rel="stylesheet" href="css/themes/yellow-black.css"> -->
</head>
<body>
<main>
<p><img src="https://img.shields.io/badge/Welcome_To-CybernetiX--S3C-cyan.svg?longCache=true&style=for-the-badge" alt="Welcome" width="300px" align="middle"></p>
<div class="intro">Greetings from:</div>
<img src="https://image.ibb.co/bMZecJ/lJeA3tgA.gif" alt="lJeA3tgA" border="0">
<div class="tagline">All-Star Dev | Code Fanatic | Linux Hacker | Cyber Security Professional</div>
<!-- Find your icons from here - https://fontawesome.com/icons?d=gallery&s=brands -->
<div class="icons-social">
<a target="_blank" href="https://CybernetiX-S3C.github.io/main" align="middle" title="Main" rel="nofollow"><i class="fab fa-github"></i>Main</a>
<!-- <a target="_blank" href="https://twitter.com/flexdinesh"><i class="fab fa-twitter"></i></a> -->
<!-- <a target="_blank" href="https://Encrypted-Crack.g"><i class="fas fa-user"></i></a> -->
<a target="_blank" href="https://www.linkedin.com/in/john-modica-228219b5" align="middle" title="LinkedIn" rel="nofollow"><i class="fab fa-linkedin"></i>LinkedIn</a>
<a target="_blank" href="https://medium.com/#dmferreira/interview-with-cyber-threat-specialist-john-modica-d3708b235207" align="middle" title="Medium" rel="nofollow"><i class="fab fa-medium"></i>Medium</a>
<a target="_blank" href="https://www.youtube.com/channel/UCAOxHOEpTxpwpmrwy5edWHg" align="middle" title="YouTube" rel="nofollow"><i class="fab fa-youtube"></i>Youtube</a>
<a target="_blank" href="https://www.facebook.com/Cyber.S3C.Professional" align="middle" title="Facebook" rel="nofollow"><i class="fab fa-facebook-f"></i>Faceboot</a>
<a target="_blank" href="https://DarkJpeg-Stego.github.io/" align="middle" title="DarkJpeg" rel="nofollow"><i class="fas fa-eye"></i>DarkJpeg</a>
<a target="_blank" href="https://Encrypted-Crack.github.io/" align="middle" title="Encrypted Crack" rel="nofollow"><i class="fas fa-user-secret"></i>Encrypted-Crack</a>
<a target="_blank" href="https://join.slack.com/t/officialcybernetixs3c/shared_invite/enQtNDA5MzIzMzg0OTk0LWNkOTI0N2MzMWJiZDMyYjA4NWI3ODhhNmNhZDdhNTIzY2YzMDFkY2NiMGIxM2FlOWVjYTJmMzRkZDA3Y2Y1MzM" align="middle" title="Slack" rel="nofollow"><i class="fab fa-slack"></i>Slack</a>
<script type="text/javascript">
var _sz=_sz||{};_sz.appId="20dead96",function(){var e=document.createElement("script");e.src="https://cdn.signalzen.com/signalzen.js",e.setAttribute("async","true"),document.documentElement.firstChild.appendChild(e);var t=setInterval(function(){"undefined"!=typeof SignalZen&&(clearInterval(t),new SignalZen(_sz).load())},10)}();
</script>
</div>
</main>
</body>
</html>
I just can't wrap my head around having text under icons. But I need the setup of the Icons left to right.
I do not think many people understand to click the icons. Hence I want to add the names to the pages or sections.
Thanks
Is this what you want?
I wrapped the icon title with a div and made a tag the display:inline-block
/* Typography */
html {
font-family: 'Roboto', sans-serif;
}
#media (min-width: 576px) {
html {
font-size: 14px;
}
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
#media (min-width: 992px) {
html {
font-size: 18px;
}
}
#media (min-width: 1200px) {
html {
font-size: 20px;
}
}
.icons-social i {
font-size: 3em;
}
/* Custom Styles */
main {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
padding: 0 30px;
text-align: center;
}
main>.intro {
font-family: 'Reem Kufi', sans-serif;
font-size: 3.75em;
font-weight: 600;
}
main>.tagline {
font-size: 1.5rem;
margin: 1.5rem 0;
font-weight: 100;
}
.icons-social i {
padding: 10px;
}
#icons-social {
margin: 0 auto;
width: 1050px;
height: 175px;
margin-top: 89px;
}
.icons_social {
width: 50px;
float: center;
width: 100px;
height: 85px;
}
.icons_social span {
display: block;
}
.sidebar-social a:hover i.fa-main {
color: cyan;
}
.sidebar-social a:hover i.fa-LinkedIn {
color: cyan
}
.sidebar-social a:hover i.fa-Medium {
color: cyan
}
.sidebar-social a:hover i.fa-YouTube {
color: cyan
}
.sidebar-social a:hover i.fa-Facebook {
color: cyan
}
.sidebar-social a:hover i.fa-DarkJpeg {
color: cyan
}
.sidebar-social a:hover i.fa-Encrypted Crack {
color: cyan
}
.sidebar-social a:hover i.fa-Slack {
color: cyan
}
}
.devto {
margin-bottom: -0.20rem;
}
.devto svg {
margin-bottom: -0.20rem;
margin-left: 0.675rem;
;
width: 2.65rem;
height: 2.65rem;
}
.icons-social a{
display:inline-block;
}
<!DOCTYPE html>
<html>
<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>John Modica | CybernetiX S3C</title>
<link rel="icon" href="favicon.ico" type="image/png" />
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi|Roboto:300" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<!-- <link rel="stylesheet" href="css/themes/indigo-white.css"> -->
<!-- <link rel="stylesheet" href="css/themes/green-white.css"> -->
<!-- <link rel="stylesheet" href="css/themes/red-white.css"> -->
<link rel="stylesheet" href="css/themes/grey-white.css">
<!-- <link rel="stylesheet" href="css/themes/white-indigo.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-blue.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-grey.css"> -->
<!-- <link rel="stylesheet" href="css/themes/white-red.css"> -->
<!-- <link rel="stylesheet" href="css/themes/yellow-black.css"> -->
</head>
<body>
<main>
<p><img src="https://img.shields.io/badge/Welcome_To-CybernetiX--S3C-cyan.svg?longCache=true&style=for-the-badge" alt="Welcome" width="300px" align="middle"></p>
<div class="intro">Greetings from:</div>
<img src="https://image.ibb.co/bMZecJ/lJeA3tgA.gif" alt="lJeA3tgA" border="0">
<div class="tagline">All-Star Dev | Code Fanatic | Linux Hacker | Cyber Security Professional</div>
<!-- Find your icons from here - https://fontawesome.com/icons?d=gallery&s=brands -->
<div class="icons-social">
<a target="_blank" href="https://CybernetiX-S3C.github.io/main" align="middle" title="Main" rel="nofollow"><i class="fab fa-github"></i><div>Main</div></a>
<!-- <a target="_blank" href="https://twitter.com/flexdinesh"><i class="fab fa-twitter"></i></a> -->
<!-- <a target="_blank" href="https://Encrypted-Crack.g"><i class="fas fa-user"></i></a> -->
<a target="_blank" href="https://www.linkedin.com/in/john-modica-228219b5" align="middle" title="LinkedIn" rel="nofollow"><i class="fab fa-linkedin"></i><div>LinkedIn</div></a>
<a target="_blank" href="https://medium.com/#dmferreira/interview-with-cyber-threat-specialist-john-modica-d3708b235207" align="middle" title="Medium" rel="nofollow"><i class="fab fa-medium"></i><div>Medium</div></a>
<a target="_blank" href="https://www.youtube.com/channel/UCAOxHOEpTxpwpmrwy5edWHg" align="middle" title="YouTube" rel="nofollow"><i class="fab fa-youtube"></i><div>Youtube</div></a>
<a target="_blank" href="https://www.facebook.com/Cyber.S3C.Professional" align="middle" title="Facebook" rel="nofollow"><i class="fab fa-facebook-f"></i><div>Faceboot</div></a>
<a target="_blank" href="https://DarkJpeg-Stego.github.io/" align="middle" title="DarkJpeg" rel="nofollow"><i class="fas fa-eye"></i><div>DarkJpeg</div></a>
<a target="_blank" href="https://Encrypted-Crack.github.io/" align="middle" title="Encrypted Crack" rel="nofollow"><i class="fas fa-user-secret"></i><div>Encrypted-Crack</div></a>
<a target="_blank" href="https://join.slack.com/t/officialcybernetixs3c/shared_invite/enQtNDA5MzIzMzg0OTk0LWNkOTI0N2MzMWJiZDMyYjA4NWI3ODhhNmNhZDdhNTIzY2YzMDFkY2NiMGIxM2FlOWVjYTJmMzRkZDA3Y2Y1MzM" align="middle" title="Slack" rel="nofollow"><i class="fab fa-slack"></i><div>Slack</div></a>
<script type="text/javascript">
var _sz = _sz || {};
_sz.appId = "20dead96",
function() {
var e = document.createElement("script");
e.src = "https://cdn.signalzen.com/signalzen.js", e.setAttribute("async", "true"), document.documentElement.firstChild.appendChild(e);
var t = setInterval(function() {
"undefined" != typeof SignalZen && (clearInterval(t), new SignalZen(_sz).load())
}, 10)
}();
</script>
</div>
</main>
</body>
</html>
Here's a working codepen showing you how I did it.
https://codepen.io/wearetamo/pen/mGPgxV
Basically what I did on the HTML was create a row an columns
<div class="row">
<div class="cols">
<a target="_blank" href="https://CybernetiX-S3C.github.io/main" align="middle" title="Main" rel="nofollow"><i class="fab fa-github"></i>Main</a>
</div>
<div class="cols">
<a target="_blank" href="https://CybernetiX-S3C.github.io/main" align="middle" title="Main" rel="nofollow"><i class="fab fa-github"></i>Main</a>
</div>
.
. YOUR OTHER ICONS here
.
</div>
CSS
.row {
width: 100%;
}
.cols {
width: 12.5%;
display: block;
float: left;
}
I am editing a simple search bar. My plan is to have two buttons above the search bar, that are responsive. With one button floating to the right and one button floating to the left.
However, I cannot seem to get the buttons to stop coming out they are not inline with the search bar, almost "Out of its container".
Code:
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
Image:
Option 1:
.Wrap your inner elements of container in another wrap, and set the margin on that element.
Option 2:
Is in snippet, apply margin to icons, and input itself. I added 3 lines of code to your snippet.
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
margin-left: 35px; /* 1) MOVING FIRST IMAGE FROM SIDE */
}
#faupload {
float: right;
margin-right: 35px; /* 2) MOVING 2ND IMAGE FROM RIGHT SIDE */
}
input {
border: 1px solid #F1F;
width: calc(100% - 70px); /* 3) 100% - HOW MUCH MARGIN DO YOU WANT AROUND INPUT? */
border-radius: 3px;
height: 35px;
margin: 0 35px; /* 4) APPLY MARGIN TO INPUT */
}
span.clear { clear: left; display: block; }
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
Here is a way to do it using flexbox, with much more less code in CSS and in HTML
.container,
.icons {
display: flex;
flex-wrap: wrap;
width: 100%
}
.icons {
justify-content: space-between
}
.searchbar {
flex: 1
}
#searchbox {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icons">
<div id="falist">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div id="faupload">
<i class="fa fa-upload" aria-hidden="true"></i>
</div>
</div>
<div class="searchbar">
<input id="searchbox" type="search" />
</div>
</div>
take out that clear:left from span.clear
Snippet below
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
vertical-align:top;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</div>
</body>
</html>
.icons{
margin-left: 37px;
margin-right: 37px;
}
This works to get them on top where the red boxes are. If not exactly, just tweak them.
I managed to fix this issue by adding the following code to the element .icons hope it helps!
.icons{
margin: 0 31px;
}
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
.icons{
margin: 0 31px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>