I am trying to do media query on the "about" page of my website but I seem to have an issue. In the original CSS, I divided "information" into 2 columns and left right padding so the window doesn't flow all the way to the screen. However, When doing media query, the padding and the grid stays the same which gave my website extra space on the right that I don't want. I was wondering how I can change that?
I've tried changing those property inside of media query but it doesn't seem to affect the website at all.
I've tried:
grid-template-columns: repeat(1,1fr)
padding-right:0px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" href="https://unpkg.com/#blaze/css#3.2.0/dist/blaze.css">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<script src="https://unpkg.com/#blaze/atoms#6.1.0/dist/blaze-atoms.js"></script>
<script src="javascript/main.js"></script>
<script src="javascript/jquery.js"></script>
</head>
<body>
<div class="cotainer">
<div class="title">
About Me!
</div>
<div class="information">
<div class="span-row-2">
<img src="images/profile.svg" id="logo">
</div>
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Education</label>
<div class="tab">
<h1 class="phrase">San Jose State University</h1>
<blaze-divider class="divider">Major</blaze-divider>
<div class="major">Digital Media Art</div>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Contacts</label>
<div class="tab">
<h1 class="phrase">Stay in touch!</h1>
<blaze-divider class="divider">Get Connected</blaze-divider>
<div class="socials">
Facebook
Instagram
Linkedin
Resume
</div>
</div>
</div>
</div>
<nav id="mainnav" class="group">
<div id="menu">≡ Menu</div>
<ul>
<li>About</li>
<li>Home</li>
<li>Portfolio</li>
</ul>
</nav>
<script>
$(document).ready(function() {
// JQUERY NAV TOGGLE
$('#menu').bind('click',function(event){
$('#mainnav ul').slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 768) {
$('#mainnav ul').removeAttr('style');
}
});
});
</script>
</body>
</html>
information {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-right: 50px;
background:#323526;
padding-bottom: 50%;
}
.span-row-2{
grid-row: span 2 / auto;
align-items: center;
margin:10vw;
}
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs label {
order: 1;
display: block;
padding: 1rem 3rem;
margin-top:70px;
cursor: pointer;
transition: background ease 0.2s;
width:50%;
text-align: center;
border-bottom: 1px solid #C28710;
color: #C28710;
font-size: 1.5vw;
letter-spacing: 2px;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
}
.tab{
border-radius: 0px 0px 20px 20px;
background-color: rgba(0, 0, 0, 0.2);
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
border-bottom: 4px solid #C28710;
font-weight: bold;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}
#media (max-width: 45em) {
.tabs label,
.tab .tabs {
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 2rem;
}
}
#media all and (max-width:650px){
.span-row-2{
grid-row: span 2 / auto;
align-items: center;
margin:40px;
min-width:250px;
min-height: 250px;
grid-area: main;
}
.tabs label {
order: 1;
display: block;
margin-top:20px;
cursor: pointer;
transition: background ease 0.2s;
width:50%;
text-align: center;
border-bottom: 1px solid #C28710;
color: #C28710;
font-size: 15px;
letter-spacing: 2px;
}
.information{
grid-template-columns:repeat(1,1fr);
padding-right:0px;
}
}
What I got
Desired affect
It's unclear to me what your desired outcome is here, but one thing I noticed is there seems to be some conflict between your two media queries.
The rules under the max-width:45em media query are overridden by those under max-width:650px
Hope that helps?
¯\_(ツ)_/¯
Related
I have an adminHeader.php as belows,
<div class="main_content">
<div style="width: 100%">
<div class="header" style="align-items: center;font-size: 17px;">
<a style=" text-decoration-line: none;">Dashboard</a>
<div>
<a href="#" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" > <img src="../assets/images/logo.png" width="35" height="35" style="vertical-align:middle"/> <?php echo htmlspecialchars($_SESSION["username"]); ?></a>
<i class="fa fa-toggle-left"></i> logout
</div>
</div>
I need to use this header on top of my page as follows,
So I implemented as follows,
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anomaly Monitoring Dashboard</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<div class="wrapper">
<div class="sidebar">
<h2> Dashboard</h2>
<ul>
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
<div class="main_content">
<?php
include "./adminHeader.php";
?>
</div>
</div>
</div>
But I can see the rendered HTMl as below,
And I need to scroll to see all the fields. Can someone help me to fit this to the screen? '
update:
Here is my css class.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .main_content{
width: 100%;
margin-left: 220px;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
.error {
color: red;
}
.vega-actions {display: none}
h3 { font-family: 'Source Code Pro', sans-serif;
font-weight: 50;
font-size: 10px;
margin-top:0px;
display: block;
color: #404040;
text-align: right;
border-top:3px solid #000;
}
.card {
display: flex;
justify-content: center;
}
.flex {
display: flex;
justify-content: space-between;
}
Can someone show me what should I include in css file to show as I required?
try flexbox or grid layout
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout
for flexbox layouts use the display: flex on the container and add flex-flow-column for a vertical flexible layout. Then set you width and heights to your needs, with flex-shrink: 0 for elements with fixed width or height.
.wrapper {
display: flex;
width: 100%;
height: 100%
}
.sidebar {
width: <sidebar width>;
display: block;
height: 100%;
flex-shrink: 0;
}
.main-content {
width: calc(100% - <sidebar width>);
display: block | <or flex or grid, ...>;
}
I'm pretty much stuck on a site that I'm trying to build in the responsiveness part
And in the position of the text.
The img background -
What I try to do it to make the img background full cover in big screens
and on the small screen, I want that they will see the ball in the img - it only works for me for big screens.
Next to this, I want to put H1 and p, but I want it will be near the ball in the background img
My code:
/* hamburger */
const hamburger = document.querySelector("#hamburger");
const navUL = document.querySelector("#nav-ul");
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
html,body{
padding: 0;
margin: 0;
font-family: 'Rubik', sans-serif;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
.container{
max-width: 1100px;
margin: 0 auto;
}
.btn{
background-color: #222f3e;
color: white;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.btn:hover{
color: #2e86de;
background-color: #fff;
}
/* Header */
header {
background-image: url(./img/main-img.jpg) ;
background-repeat: no-repeat;
background-position: bottom center ;
background-size: cover;
}
/* Navbar */
#navbar{
padding: 10px;
}
#navbar .container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.hamburger{
display: none;
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.hamburger:focus{
outline: none;
}
#navbar ul{
padding-right: 0;
}
#navbar ul li {
display: inline-block;
font-size: 18px;
}
.logo a{
padding: 20px;
color: #fff;
}
/* Showcase Section */
#showcase{
min-height: 700px;
}
#showcase .container{
}
#media screen and (max-width: 767px){
#nav-ul{
display: none;
width: 100%;
}
#nav-ul.show{
display: flex;
justify-content: center;
}
.hamburger{
display: block;
}
}
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./mystyle.css">
<title>Football</title>
</head>
<body>
<header>
<nav id="navbar">
<div dir="ltr" class="container">
<h1 class="logo">
Natan Football
</h1>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-ul">
<li><a class="btn"href="#">צור קשר</a></li>
<li><a class="btn"href="#">מה מציעים</a></li>
<li><a class="btn"href="#">קצת עלינו</a></li>
<li><a class="btn" href="./index.html">דף הבית</a> </li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container grid">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</section>
</header>
<script src="./app.js"></script>
</body>
</html>
here i have provided a very basic code cause i don't have your full code.
I just added few css properties for you needs. If you run this code on big screen the .text will be top and center of the page. and you go in small screen text will be near the ball as you asked. You can even use px for height. It's just an example to show you.
body {
background: url("https://i.stack.imgur.com/08nIZ.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.text {
position: absolute;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
#media screen and (max-width: 767px) {
body {
height: 40vh;
}
.text {
top: 50%;
}
}
<div class="wrapper">
<div class="text">
<h1>some text asgfasfgfdfgdg</h1>
<p>dsgsdgdfgdfgdg</p>
</div>
</div>
Let me know if it doesn't work for you.
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
Instead of putting the div element of the border-bottom outside of the main div, is there a way to put a border-bottom inside of the main div element. Here is the screenshot that I want to happen https://i.imgur.com/jmAkBP7.png as you notice that there is a blue line, that would be the border-bottom.
html,
body {
margin: 0;
padding: 0;
}
.wrap {
height: 100vh;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px auto 100px;
}
.headNav {
position: relative;
grid-column: 1 / -1;
overflow: hidden;
/* background: #000; */
}
.menu {
grid-column: 1 / 3;
grid-row: auto;
/* background: pink; */
}
.content {
grid-column: 3 / -1;
/* background-color: blue; */
}
.footer {
grid-column: 1 / -1;
/* background: #000; */
}
.body {
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(./img/bgmain.jpg);
background-size: cover;
}
.logo {
display: inline;
}
.logo > img {
display: inline;
padding-top: 10px;
height:80px;
padding-left: 20px;
}
.link, ul, li {
display: inline;
list-style-type: none;
}
.link {
position: absolute;
top: 45px;
left: 32.2%;
}
li a {
font-family: 'Raleway', sans-serif;
font-weight: 900;
text-transform: uppercase;
text-decoration: none;
font-size: 20px;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jury Gregorio - Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="wrap body">
<div class="headNav">
<div class="logo"><img src="./img/logo.png" alt="Logo"></div>
<div class="link">
<ul><li>Home</li></ul>
<ul><li>About</li></ul>
<ul><li>Blog</li></ul>
<ul><li>Contact</li></ul>
</div>
</div>
<div class="menu"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
Like this:
html,
body {
margin: 0;
padding: 0;
}
.wrap {
height: 100vh;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px auto 100px;
}
.headNav {
position: relative;
grid-column: 1 / -1;
overflow: hidden;
/* background: #000; */
}
.menu {
grid-column: 1 / 3;
grid-row: auto;
/* background: pink; */
}
.content {
grid-column: 3 / -1;
/* background-color: blue; */
}
.footer {
grid-column: 1 / -1;
/* background: #000; */
}
.body {
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(./img/bgmain.jpg);
background-size: cover;
}
.logo {
display: inline;
}
.logo > img {
display: inline;
padding-top: 10px;
height:80px;
padding-left: 20px;
}
.link, ul, li {
display: inline;
list-style-type: none;
}
.link {
position: absolute;
top: 45px;
left: 32.2%;
}
li a {
font-family: 'Raleway', sans-serif;
font-weight: 900;
text-transform: uppercase;
text-decoration: none;
font-size: 20px;
color: #fff;
}
ul {
border-bottom: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jury Gregorio - Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="wrap body">
<div class="headNav">
<div class="logo"><img src="./img/logo.png" alt="Logo"></div>
<div class="link">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="menu"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
So as you can see on this image:
I want to make a page design as above, but I can not place the checkboxes like on the picture (centered, under it's right times, above it's spaces)
Currently I am here:
body {
background-color: gray;
}
#head {
padding-top: 20px;
text-align:center;
display:block;
}
#container {
background-color: #1b345e;;
}
h2 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color: #1b345e;
color: white;
}
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
input {
margin-left: 49%;
width: 30px;
height: 30px;
}
.checkboxes{
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Piarista Kollégium - Stúdiumi jelentkezés</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="container">
<div class="topnav">
<div class="topnav-centered">
Jelentkezés
</div>
Frissítések
<div class="topnav-right">
Bejelentkezés
</div>
</div>
<div id="head">
<img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>
<div class="checkboxes">
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
</div>
</body>
</html>
But as you can see, I am not doing it the right way. Can someone help me or explain me how I could place my elements like on the picture?
(The header part is finished)
Center the elements using flexbox and use justify-content: center to align them.
.checkboxes {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}
.checkboxes div {
text-align: center;
margin: 0 10px;
}
Here is a working example: https://codepen.io/dobladov/pen/pqqypY