Sorry for the vague title , i'm fairly new to CSS and I have a problem with aligning a scroll box exactly to the right of another element
my page looks like this now:
I want it to look like this (i did some editing):
here is my html code and css styling of the boxes:
.center {
margin: auto;
width: 60%;
padding: 10px;
font-family: Helvetica;
}
li{
color: lightgray;
border: 1px solid;
border-color: #8056c7;
width: 60%;
padding: 10px;
margin-right: 10px;
}
.box
{
background-color: whitesmoke;
}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; border-radius: 25px; margin-bottom: 13px; padding: 11px;}
#messages li:nth-child(odd) { background:#444a57 ; }
#msgbt,#bt
{
background-color: #7850c0;
border-color: #7850c0;
}
::-webkit-scrollbar {
width:5px;
height:8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(53, 57, 71, 0.849);
width: 6px;
height: 6px;
-webkit-border-radius: 4px;
}
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-right {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-centre {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
p{
color: whitesmoke;
}
#border
{
background-color: #282c34;
border: 1px solid;
border-color: #6e4bac;
border-radius: 25px;
}
body {
background-color: #252839;
color: #FFF;
padding: 10px;
}
.container {max-width: 500px; position: relative; margin: 0 auto;}
.center { margin: 0 auto;}
.terminal {
animation: blink 1s infinite step-end;
}
#keyframes blink {
from, to { opacity: 0; }
50% {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="styles2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body style="background-color: #21252b;">
<h1 style="color: lightgrey; text-align: center;">placeholder</h1>
<div class="center">
<div class="jumbotron" id="border" >
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; max-height: 640px; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; scroll-behavior: smooth;">
<div id="spot" >
</div>
</div>
</div>
</div>
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; float: right;">
<h1 style="color: white;">placeholder</h1>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
</div>
EDIT: added CSS file some styles in the css files aren't related to this example page , I just made this example page out from bigger page for clarifying purposes
I've added display: inline-block; / removed padding: 10px; to your .center css to achieve the desired result.
.center {
margin: auto;
width: 60%;
font-family: Helvetica;
display: inline-block;
}
li{
color: lightgray;
border: 1px solid;
border-color: #8056c7;
width: 60%;
padding: 10px;
margin-right: 10px;
}
.box
{
background-color: whitesmoke;
}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; border-radius: 25px; margin-bottom: 13px; padding: 11px;}
#messages li:nth-child(odd) { background:#444a57 ; }
#msgbt,#bt
{
background-color: #7850c0;
border-color: #7850c0;
}
::-webkit-scrollbar {
width:5px;
height:8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(53, 57, 71, 0.849);
width: 6px;
height: 6px;
-webkit-border-radius: 4px;
}
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-right {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-centre {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
p{
color: whitesmoke;
}
#border
{
background-color: #282c34;
border: 1px solid;
border-color: #6e4bac;
border-radius: 25px;
}
body {
background-color: #252839;
color: #FFF;
padding: 10px;
}
.container {max-width: 500px; position: relative; margin: 0 auto;}
.center { margin: 0 auto;}
.terminal {
animation: blink 1s infinite step-end;
}
#keyframes blink {
from, to { opacity: 0; }
50% {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="styles2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body style="background-color: #21252b;">
<h1 style="color: lightgrey; text-align: center;">placeholder</h1>
<div class="center">
<div class="jumbotron" id="border" >
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; max-height: 640px; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; scroll-behavior: smooth;">
<div id="spot" >
</div>
</div>
</div>
</div>
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; float: right;">
<h1 style="color: white;">placeholder</h1>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
</div>
Related
I have a navbar at the top of my page with an image logo and some hyperlinks. I want to make it so the image is always the max height it can be while staying within the foot print of the navbar. Here's what I mean:
As you can see, the image in the top left has 10px padding, but the image is slightly too small and has a larger gap at the bottom.
This is my code:
HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.header-logo {
margin: 10px;
float: left;
height: 72px;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
How can I make it so no matter what screen size is, the image is always as big as it can be without influening the navbar height?
Basically by making it position:absolute inside the position:relative header, you can control where it begins top:0 and where it'll end bottom:0.
Update:
We will wrap the image inside a container. That container will take 100% of the height by using absolute position with top and bottom equals 0. It will have a padding of the desired 10px, where as inside of it the image will reside having a height of 100%.
:root {
color-scheme: dark;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.heading {
margin: 20px;
font-size: 2.5vw;
text-align: center;
color: #ffffff;
}
p {
color: #ffffff;
font-size: 20px;
}
a {
text-decoration: none;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 0%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 99;
border: none;
background-color: #3a3a3a;
cursor: pointer;
border-radius: 100px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #2a2a2a;
}
.progress-container {
padding: 10px;
}
.headar-logo-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: 10px;
}
.header-logo {
height: 100%;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
position: relative;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
.menu-button {
display: none;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #000000;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
margin: auto 10px auto 10px;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
display: none;
}
.footer-logo {
width: 160px;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.output {
display: grid;
grid-template-columns: auto;
justify-content: center;
border-radius: 10px;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#photo {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.scrn_button {
font-size: 30px;
background-color: #bfbfbf;
border: 2px solid black;
border-radius: 10px;
color: black;
}
.scrn_button:hover {
cursor: pointer;
background-color: #9b9b9b;
}
.scrn_button:active {
background-color: #797979;
}
.contact-form {
border-radius: 10px;
background-color: #ffffff;
color: #000000;
padding: 10px;
width: auto;
}
.input {
width: 100%;
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
font-size: 18px;
}
.contact-form-container {
margin: 10px 300px;
}
.submit-button-container {
text-align: center;
}
.submit-button {
font-size: 25px;
border-radius: 10px;
border: none;
background-color: #818181;
user-select: none;
}
.submit-button:active {
background-color: #414141;
transition: ease 0.1s;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.price::before {
content: "\00a3";
}
#msg {
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
resize: none;
width: 100%;
font-size: 15px;
}
.submit-button:hover::after {
content: ' >';
}
.upload-label {
background-color: #0030b0;
color: white;
padding: 10px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
border: none;
user-select: none;
}
.upload {
margin: 10px;
text-align: center;
}
#output {
width: 100%;
text-align: center;
padding: 10px;
}
.portfolio-intro {
font-size: 30px;
}
.content {
margin: 10px;
}
.professional:hover:before {
content: 'un-';
font-weight: bolder;
}
.learn-more {
color: #ffd000;
font-size: 20px;
}
.learn-more:hover {
color: #dab200;
transition: all ease 0.3s;
}
.learn-more:active {
color: #bb9900;
transition: all 0s;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<div class="headar-logo-container">
<img src="https://picsum.photos/30/20" title="Aeron" alt="logo" class="header-logo">
</div>
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
<div class="mobile-nav">
<span class="menu-button" onclick="openNav()">☰</span>
<div id="mobile-nav-panel" class="mobile-nav-panel">
+
<ul class="mobile-nav-link-list">
<li class="mobile-nav-link">Home</li>
<hr>
<li class="mobile-nav-link">Portfolio</li>
<hr>
<li class="mobile-nav-link">Contact me</li>
<hr>
<li class="mobile-nav-link">About me</li>
<hr>
<li class="mobile-nav-link">Recipes</li>
<hr>
<li class="mobile-nav-link">Progress</li>
<hr>
<li class="mobile-nav-link">PC Setup Designer</li>
<hr>
<li class="mobile-nav-link">Gallery</li>
<hr>
<li class="mobile-nav-link"></li>
</ul>
</div>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div class="content">
</div>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron</p>
<div class="footer-links">
About me
<p>|</p>
Policy
<p>|</p>
<a href=contact.html>Contact me</a>
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top"><img src="./images/arrow_upward.svg" width="30px" alt="Return"></button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mobile-nav-panel").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile-nav-panel").style.width = "0";
}
</script>
</body>
</html>
Any tips on how to align the H4 text on the projects section so that it appears beneath the images rather than to right of them? This doesn't appear to correspond to the HTML whereby the H4 follows the img tag. In order to align items along the the horizontal and vertical axis I have been using css grids.
Many thanks!
/*Reset */
li {
list-style-type: none;
}
body,p,a,ul,li {
margin: 0;
padding: 0;
text-decoration: none;
}
/*Base styles*/
body {
background: var(--secondary);
overflow-x: hidden;
font-family: 'Rubik-VariableFont_wght';
}
.button {
background: none;
border: 2px solid var(--primary);
color: var(--primary);
padding: 6px 12px;
border-radius: 20px;
text-transform: uppercase;
box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
display: inline-block;
}
.button:hover {
color: #222;
background: var(--primary);
}
input,textarea {
background-color: rgba(255, 255, 255, 0.05);
padding: 10px 16px;
border-radius: 20px;
border: 2px solid #9893d8;
color: #f2f2f2;
}
/*Fonts*/
#font-face {
font-family:'Rubik-VariableFont_wght';
src:url('/fonts/Rubik-VariableFont_wght.ttf')
}
h1,h2,h3,h4 {
color: #0077b3;
font-weight: normal;
}
p,a,li {
color: ##0077b3;
}
h1,h3 {
font-size: 1.2em;
}
h2 {
font-size:1.6em;
}
h4 {
font-size: 1.1em;
}
.leading {
font-size: 1.1em;
}
/*Mobile/default styles*/
.grid {
display: grid;
grid-template-columns: repeat (8,1fr);
gap: 10px;
}
#portfolio {
background-image: url('images/spaceimg.png');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
padding: 30px 20px;
}
#portfolio h3 {
margin-bottom: 0;
text-align: center;
}
.projects a {
grid-column: 1/9;
margin: 20px 0;
display: flex;
}
.projects a *{
margin: 0 20px;
max-width: 40%;
align-self: center;
}
.projects h4 {
color: #0077b3;
}
.projects img {
box-shadow: 30px #222;
}
.projects img {
border-radius: 60px;
}
.projects {
margin-top:40px;
}
.projects a {
grid-column: span 4;
margin: 20px 0;
}
.projects .row-one {
grid-row:1;
}
.projects img {
width: 500px;
height: 100px;
border-radius: 20px;
}
.projects .row-three {
grid-column: 3/7;
}
.projects a * {
margin: 10px auto;
max-width:30%;
height: 120px;
vertical-align: text-bottom;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example site</title>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<section id="portfolio">
<!--Project section-->
<h3>Example site</h3>
<div class="grid projects">
<a href="#">
<img src="images/image3.png" alt="shuttle-image1" >
<h4>Space race one</h4>
</a>
<a href="#">
<img src="images/image4.png" alt="shuttle-image2">
<h4>Space race two</h4>
</a>
<a href="#" class="row-three">
<img src="images/image5.png" alt="shuttle-image3">
<h4>Space race three</h4>
</a>
</div>
</section>
</body>
</html>
I can't seem to solve what was previously not a problem:
My navbar is fullwidth and mobile-y even above the breaking point
My grid boxes are not responsive on mobile even though I have set it to 1fr column and (6, fr) row.
https://codepen.io/arian-wardak/pen/QWKyzdj
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Services - Quantum Marketing</title>
<link rel="stylesheet" type="text/css" href="css/quantum.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<nav>
<ul>
<li>Home</li>
<li><a class="active" href="services.html">Services</a></li>
<li>Contact</li>
<li>Account</li>
<li>Cite</li>
</ul>
</nav>
<div class="grid-services">
<div class="grid-item item-1">
<img src=img/coding.png alt="Coding Icon" width="64" height="51">
<h4>Web Development</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-2">
<img src=img/search.png alt="Search Icon with a Dollar Sign" width="64" height="64">
<h4>Search Engine Optimization</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-3">
<img src=img/copywriting.png alt="Notepad and Pencil Icon" width=64 height=57>
<h4>Copywriting</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-4">
<img src=img/email.png alt="Email Icon" width=64 height=64>
<h4>Email Marketing</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-5">
<img src=img/social.png alt="Social Media Icon" width=64 height=45>
<h4>Social Media Marketing</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-6">
<img src=img/retargeting.png alt="Bullseye Icon" width=64 height=64>
<h4>Retargeting</h4>
<div class="button">Choose</div>
</div>
</div>
</main>
<footer>
Copyright © 2020 Ariana Wardak. All Rights Reserved. | Privacy Policy Disclaimer | Designed by Ariana
</footer>
</body>
</html>
* {
box-sizing:border-box;
margin: 0;
font-family: 'Montserrat', sans-serif;
padding: 0;
outline: none;
}
body {
background-color: dimgray;
color: black;
}
main {
grid-area: main;
text-align:center;
overflow: hidden;
white-space: normal;
}
h1 {
padding: 20px;
color: white;
text-align: center;
}
h3 {
color: white;
text-align: center;
}
h4 {
padding: 30px;
color: white;
text-align: center;
}
.content {
margin: 0;
padding: 0;
background-color: white;
color: black;
}
.content img {
height: auto;
padding-right: 20px;
margin: 0;
}
nav {
overflow: hidden;
background-color: deepskyblue;
font-size: smaller;
}
ul {
display:block;
text-decoration: none;
text-align: center;
list-style: none;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
padding: 15px;
}
li a:hover {
background-color: deepskyblue;
}
li a.active {
background-color: navy;
}
.hero {
text-align: center;
background-color: navy;
padding: 200px 0;
}
.faq {
padding: 50px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
min-height: 300px;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
text-align: left;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.grid-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 300px 300px;
padding: 20px;
height: 100vh;
grid-gap: 20px;
}
.grid-item {
background-color: navy;
padding: 20px;
}
button,
.button,
.button-services,
.button-contact {
background-color: deepskyblue;
display: inline-block;
padding:10px 25px;
margin: 15px 20px;
font-weight: bold;
border-radius: 5px;
color: white;
text-decoration: none;
}
button:hover,
.button:hover,
.button-services:hover,
.button-contact:hover {
background-color: dimgray;
color: deepskyblue;
cursor: pointer;
transition: all 0.1s ease;
}
.faq {
padding: 50px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
min-height: 300px;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
text-align: left;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.contact {
max-width: 700px;
margin: auto;
}
.form {
max-width: 700px;
text-align: center;
margin: 20px auto;
display: grid;
grid-template-columns: 1fr 1em 2fr;
grid-gap: 0.3em 0.6em;
grid-auto-flow: dense;
align-items: center;
}
input, label {
display: block;
}
textarea {
resize: vertical;
max-height: 300px;
}
.profile {
background-color: white;
padding: 20px;
margin: auto;
color: black;
max-width: 800px;
text-align: center;
}
.profile h4 {
color: black;
}
.citations {
background-color: white;
padding: 20px;
margin: auto;
color: black;
max-width: 800px;
text-align: center;
}
.wrapper{
position: relative;
width: 500px;
background-color: navy;
margin: auto;
}
.profile_card{
height: 400px;
background: navy;
padding: 50px 25px;
position: relative;
z-index: 1;
padding: 20px;
}
.profile_card{
color: #fff;
text-align: center;
}
.profile_card .profile_img img{
width: 80px;
border-radius: 50%;
display: block;
margin: 0 auto;
}
.profile_card .profile_img .name{
font-size: 24px;
font-weight: 500;
margin: 15px 0 5px;
}
.profile_card .profile_img .place{
font-size: 14px;
font-weight: 300;
}
.profile_card .place .icon{
margin-right: 10px;
}
.profile_icons{
display: flex;
margin: 30px 0;
justify-content: center;
}
.profile_icons .profile_item{
margin-right: 15px;
}
.profile_icons .profile_item:last-child{
margin-right: 0;
}
.profile_icons .icon,
.profile_icons .number{
font-size: 24px;
}
.profile_icons .title{
font-size: 12px;
text-transform: uppercase;
margin: 10px 0;
}
.profile_btn{
background-color: deepskyblue;
padding: 10px;
border-radius: 25px;
width: 200px;
margin: 0 auto;
color: white;
cursor: pointer;
}
.profile_btn:hover{
background: #ffc208;
}
.settings_btn{
width: 50px;
height: 52px;
position: absolute;
bottom: 20px;
left: 225px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.settings_btn{
right: 0;
box-shadow: inset 2px -2px 3px ##00bfff;
}
.settings_btn:hover{
padding: 2px;
background-color: dimgray;
}
.profile_slider{
width: 325px;
height: 400px;
background: #fff;
color: #7b7a82;
position: absolute;
top: 25px;
left: 0;
font-size: 14px;
transition: bottom 0.2s ease;
}
.profile_slider li{
height: 80px;
border-bottom: 1px solid #eceff4;
padding: 15px;
}
.profile_slider li:last-child{
border-bottom: 0;
}
.profile_slider li .slider_item,
.profile_slider li .slider_left{
display: flex;
}
.profile_slider li .slider_item{
justify-content: space-between;
align-items: center;
height: 100%;
}
.profile_slider img{
width: 35px;
border-radius: 50%;
margin-right: 10px;
}
.profile_slider .item{
text-align: left;
font-size: 12px;
}
.profile_slider .item_email{
font-weight: 300;
margin-top: 5px;
}
.profile_slider .btn{
width: 100px;
padding: 8px 10px;
border-radius: 25px;
cursor: pointer;
font-size: 12px;
text-align: center;
}
.profile_slider .btn.btn_following{
background: #6a60c3;
color: #fff;
}
.profile_slider .btn.btn_following:hover{
background: #8178d1;
}
.profile_slider .btn.btn_follow{
border: 1px solid #7b7a82;
}
.profile_slider .btn.btn_follow:hover{
color: #fff;
background: #7b7a82;
}
.profile_slider.active{
left: 100%;
}
.settings_btn.active{
background: #00bfff;
}
.settings_btn i{
transition: transform 0.2s ease;
}
.settings_btn.active i{
transform: rotate(360deg);
}
.citations h4 {
color: black;
}
footer {
margin-bottom: 120px;
padding: 6px;
background-color: deepskyblue;
color: #ffffff;
text-align: center;
font-size: smaller;
}
#media screen and (max-width: 400px) {
nav {
float: none;
}
}
ul {
float: none;
}
li {
float: none;
width: 100%;
padding: 0;
}
.hero {
text-align: center;
padding: 180px 20px;
}
.connect {
margin: 0;
background-color: white;
color: black;
}
.connect img {
padding: 50px;
}
.content {
padding: 20px 8px;
}
}
.grid-services {
grid-template-columns: 1fr;
height: auto;
grid-template-rows: repeat(6, 1fr);
height: auto;
}
.form {
display: flex;
flex-direction: row;
color: white;
}
.form label {
flex: none;
display: block;
width: 250px;
font-weight: bold;
font-size: 1em;
display: inline-block;
}
.form label.right-inline {
text-align: right;
padding-right: 8px;
padding-left: 10px;
width: 300px;
}
.form .input-control {
flex: 1 1 auto;
display: block;
margin-bottom: 10px;
margin-right: 8px;
padding: 4px;
margin-top: -4px;
}
footer {
grid-area: footer;
margin: 0;
padding: 6px;
background-color: deepskyblue;
color: #ffffff;
text-align: center;
font-size: smaller;
}
You can use the Bootstrap class navbar; it already has breakpoints defined so you can have a presentable grid box at a small webpage size.
I have come across a very odd issue, I have noticed that all of a sudden my anchors stopped working, as in became unclickable. Then I figured it must be something related to applied CSS, and when I started disabling parts of my CSS, I narrowed down the issue to this couple of lines:
.content {
width: 960px;
margin: auto;
}
My page structure looks like this:
<!DOCTYPE html>
<html>
<head>
<title>CoinShop v1.0</title>
<link rel="stylesheet" type="text/css" href="/static/pages/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/navbar.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/searchbar.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/products/css/detail.css">
</head>
<body>
<div class='top-grid'>
<div class='branding-grid-container'>
<div class='branding-grid'>
<div class='branding-grid-buttons-not-authenticated'>
<a href="/help/" class='button-help'>Help</a>
<a href="/accounts/register/" class='button-register'>Register</a>
<a href="/accounts/login/" class='button-login'>Login</a>
</div>
</div>
</div>
<div class='nav-grid'>
<div class='search-bar'>
<form action="/shop/" method="GET">
<input type="text" name="q" placeholder="Search" class='search-box'>
<input type="submit" value='Search' class='search-button'>
</form>
</div>
<div class='nav-bar'>
<nav>
<ul id='menu'>
<li class='menu-item'>Home</li>
<li class='menu-item'>Shop</li>
<li class='menu-item'>Contact</li>
<li class='menu-item'>About</li>
</ul>
</nav>
</div>
</div>
</div>
<div class='content'>
spam (2018)
<h1>spam (2018)</h1>
<p>eggs</p>
<p>Price: 200.00</p>
</div>
</body>
</html>
...and all applied CSS combined looks like this:
.top-grid {
margin: auto;
background-color: #3D005A;
}
.branding-grid-container {
background-color: #4e0e7c;
}
.branding-grid {
display: grid;
grid-template-columns: 1fr 1fr 400px;
height: 6em;
background-color: #4e0e7c;
margin: auto;
width: 960px;
}
.branding-grid-buttons-not-authenticated {
margin-top: 40px;
grid-column: 3;
width: 100%;
text-align: right;
}
.branding-grid-buttons-not-authenticated a {
border-style: solid;
border-radius: 0.5em;
border: none;
color: white;
font-size: 14px;
padding: 10px 20px;
margin-right: 10px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
.button-help {
background-color: #36c1d4;
}
.button-help:hover {
background-color: #2a99a8;
}
.button-register {
background-color: #FF9900;
}
.button-register:hover {
background-color: #FF6600;
}
.button-login {
background-color: #75C10A;
}
.button-login:hover {
background-color: #62a307;
}
.branding-grid-buttons-not-authenticated a:hover {
color: white;
text-decoration: none;
}
.branding-grid-buttons-authenticated {
margin-top: 50px;
grid-column: 3;
text-align: right;
}
.buttons-authenticated li {
display: inline-block;
padding-right: 20px;
}
.buttons-authenticated li a {
color: white;
}
.buttons-authenticated li a:hover {
color: #EC9419;
}
.nav-grid {
background-color: #3D005A;
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
margin: auto;
width: 960px;
height: 2.7em;
}
.search-bar {
margin-top: 6px;
}
.nav-bar {
margin-top: 5px;
margin-bottom: 30px;
text-align: right;
}
.above-form {
background-color: #f5f3f2;
color: #FF6600;
margin-bottom: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
.error-wrapper {
background-color: #F2DEDE;
padding: 10px 20px;
margin-bottom: 15px;
color: #a94442;
font-size: 14px;
}
.close-button {
border: none;
background-color: #F2DEDE;
color: #a94442;
font-size: 21px;
font-weight: bold;
padding: 0;
}
.close-button:hover {
color: #685863;
}
ul#menu {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-item {
display: inline-block;
}
.menu-item > a {
float: left;
display: block;
padding: 0px 10px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
min-width: 80px;
text-decoration: none;
}
.menu-item > a:hover {
color: #EC9419;
text-decoration: none;
max-height: 30px;
}
.search-bar form { font-size: 0; }
.search-bar input {
display: inline-block;
height: 2em;
box-sizing: border-box;
font-size: 1rem;
}
.search-box {
border: none;
padding-left: 10px;
border-radius: 0.5em 0 0 0.5em;
}
.search-button {
background-color: #FF9900;
border-radius: 0 0.5em 0.5em 0;
border: none;
color: white;
padding: 0px 15px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
.search-button:hover {
background-color: #FF6600;
}
.search-bar {
top: 0;
bottom: 0;
}
.content {
width: 960px;
margin: auto;
}
Here is the JS fiddle.
Why would this couple of lines cause such an issue? This has never occurred to me before.
In the fiddle removing those couple of lines doesn't resolve the issue, whilst in my original code my anchor becomes clickable once those two lines are removed.
I'm referring to spam (2018) anchor specifically which I have created for the purpose of this minimal example but I have more than one and they all don't work.
Try this:
.content {
width: 960px;
margin: auto;
padding-top: 20px;
}
Play with the value in padding-top until you're happy with it.
Fiddle: https://jsfiddle.net/mdvhyjs9/
By your request:
.search-bar {
margin-top: 6px;
height: 30px;
}
Play with the value in height until you like it.
In reference to my last question here
this time I'm facing issues when webpage scrolls. The content inside 'container' section is overlapping. I've tried to fix this many times but whenever I fix something, some other thing gets broken.
As you can see in the code snippet I've used 3 different stylesheets and custom Grid with 12 rows and 0.5% margin, so the page will show 3 different views according to the resolution. The problems with this code are:
Userinfo class is overlapped by the next class when zoomed.
When page is zoomed to 300%, the class next to 'userinfo' moves away.
Here's the code (I've included only one CSS because I can't find any option to add multiple css):
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.0vw;
}
h2 {
font-family: Roboto Light;
font-size: 30px;
}
h3 {
font-size: 2.5vh;
}
h4 {
font-size: 13px;
}
p {
font-size: 2vh;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
.nav {
font-family: Roboto Light;
height: 40px;
width: 100%;
position: fixed;
background: white;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: black;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #eeeeee;
}
.header {
visibility: hidden;
}
.container {
margin-top: 10%;
margin-left: 20%;
margin-right: 20%;
background: white;
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.usericon {
margin-left: 10%;
border-radius: 10%;
width: 176px;
height: 176px;
}
.hire {
background-color: #689f38;
font-family: Roboto;
border-radius: 4px;
border: none;
color: white;
padding: 15px 32px;
outline: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.hire:hover {
background-color: #8bc34a;
box-shadow: 0px 2px 0px 0px #668e36;
cursor: hand;
}
.button:active {
background-color: #33691e;
box-shadow: 0px 2px 0px 0px #668e36;
cursor: hand;
}
.line {
border-radius: 1px;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
margin: 1% 0 1% 0.5%;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
/* For IE 6/7 */
}
/* GRID OF TWELVE */
.span_12_of_12 {
width: 100%;
}
.span_11_of_12 {
width: 91.62%;
}
.span_10_of_12 {
width: 83.25%;
}
.span_9_of_12 {
width: 74.87%;
}
.span_8_of_12 {
width: 66.5%;
}
.span_7_of_12 {
width: 58.12%;
}
.span_6_of_12 {
width: 49.75%;
}
.span_5_of_12 {
width: 41.37%;
}
.span_4_of_12 {
width: 33%;
}
.span_3_of_12 {
width: 24.62%;
}
.span_2_of_12 {
width: 16.25%;
}
.span_1_of_12 {
width: 7.875%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.span_1_of_12,
.span_2_of_12,
.span_3_of_12,
.span_4_of_12,
.span_5_of_12,
.span_6_of_12,
.span_7_of_12,
.span_8_of_12,
.span_9_of_12,
.span_10_of_12,
.span_11_of_12,
.span_12_of_12 {
width: 100%;
}
}
<html>
<head>
<title>
Yogesh Singh
</title>
<meta name="theme-color" content="#4caf50" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
</head>
<body>
<div class="nav">
<nav>
<img src="logo.svg" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
<br>
<div class="header">
</div>
<div class="container">
<!-- Rows are horizontal and Columns are vertical-->
<div class="section group">
<div class="col span_3_of_12" style="margin-top:0; max-width:50%;">
<div class="userinfo">
<img src="large.png" class="usericon" srcset="large.png, medium.png, small.png">
</div>
</div>
<div class="col span_6_of_12" style="margin-top:0; max-width:50%;">
<h2>Yogesh Singh</h2>
<h4>cyogesh56#gmail.com</h4>
<p><b style="border: 0.5px solid black;">21</b>
</p>
</div>
</div>
<div class="section group">
<div class="col span_1_of_10" style="float:right; margin-right:3%;">
<center>
<button class="hire" type="submit" href="http://about.me/cy56">Hire</button>
</center>
</div>
</div>
<hr class="line" style="margin-left:3%; margin-right:3%;">
</body>
</html>