Hello, I am making a website and I can't center my div on a my main computer's screen without it messing up on my smaller laptop. I am using percentages but that doesn't seem to be helping I will attach 2 different pictures and my css. Thank you in advance.
Laptop
Pc
CSS
body {
background-color: black;
}
.box {
position: absolute;
border-radius: 5%;
width: 8%;
height: 4%;
margin: 5%;
background-color: #888888;
border-style: solid;
border-width: medium;
border-color: orange;
}
.Forum-Block {
position: absolute;
border-radius: 5%;
left: 10%;
top: 0%;
width: 70%;
height: 140%;
margin: 5%;
background-color: #888888;
border-style: solid;
border-width: medium;
border-color: orange;
}
.Top-Bar {
position: absolute;
height: 30px;
width: 60%;
top: 8%;
left: 10%;
}
.Back-Box {
float: right;
padding: 3%;
color: white;
background-color: black;
}
.FriendsB-Box {
float: right;
padding: 3%;
color: white;
background-color: black;
}
.RequestsB-Box {
float: right;
padding: 3%;
color: white;
background-color: black;
}
.SentRequestsB-Box {
float: right;
padding: 3%;
color: white;
background-color: black;
}
.SendRequestB-Box {
float: right;
padding: 3%;
color: white;
background-color: black;
}
.PendingRequestsB-Box {
float: right;
padding: 3%;
color: white;
background-color: black;
}
.Back-Box:hover {
background-color: #262626;
}
.FriendsB-Box:hover {
background-color: #262626;
}
.RequestsB-Box:hover {
background-color: #262626;
}
.SentRequestsB-Box:hover {
background-color: #262626;
}
.SendRequestB-Box:hover {
background-color: #262626;
}
.PendingRequestsB-Box:hover {
background-color: #262626;
}
You need create one css this genre to achieve differentiate the 16 inches laptop for a 10 per example.
#media screen and (min-width: 900px) {
body {
background-color: lightgreen;
}
}
#media screen and (max-width: 901px) {
body {
background-color: blue;
}
}
u cannot center the div if it's in position, because it change position of the div according to the screen size.
Add Html code with ur question is better to solve the problem.
Related
I'm just wondering how I can put my button at the right-bottom of the parent box.
I have put position: relative; to the parent box and used position: absolute; for the button class.
This worked perfectly. However, the button overlapped with the contents of the parent box.
What would be the best way to fix this?
Here's my html and css Thank you!!
.color {
border: 1px solid black;
width: 70%;
margin: 10px auto;
padding: 0 30px;
position: relative;
}
.color p {
display: inline-block;
width: 200px;
height: 80px;
margin-right: 10px;
text-align: center;
line-height: 78px;
}
p.black {
background: black;
color: white;
}
p.gray {
background: gray;
color: white;
}
p.blue {
background: blue;
color: white;
}
p.white {
border: 1px solid black;
}
.btn {
position: absolute;
right: 10px;
bottom: 10px;
}
.btn a {
display: inline-block;
background: #efd9ca;
padding: 25px;
width: 300px;
text-align: center;
text-decoration: none;
}
<h1 class="heading">color</h1>
<p class="black">black</p>
<p class="gray">gray</p>
<p class="white">white</p>
<p class="blue">blue</p>
<div class="btn">Mozilla color collection website</div>
I removed your relative and absolute position declarations. Then I added following css declrations:
.btn {
float: right;
margin-bottom: -20px;
}
float: right; will align the button to the right side. With margin-bottom: -20px; you counter the padding bottom of 30px so that the spacing will only be 10px as previos attempted.
.color {
border: 1px solid black;
width: 70%;
margin: 10px auto;
padding: 0 30px;
}
.color p {
display: inline-block;
width: 200px;
height: 80px;
margin-right: 10px;
text-align: center;
line-height: 78px;
}
p.black {
background: black;
color: white;
}
p.gray {
background: gray;
color: white;
}
p.blue {
background: blue;
color: white;
}
p.white {
border: 1px solid black;
}
.btn a {
display: inline-block;
background: #efd9ca;
padding: 25px;
width: 300px;
text-align: center;
text-decoration: none;
}
.btn {
float: right;
margin-bottom: -20px;
}
<h1 class="heading">color</h1>
<p class="black">black</p>
<p class="gray">gray</p>
<p class="white">white</p>
<p class="blue">blue</p>
<div class="btn">Mozilla color collection website</div>
This is how my code looks like
function myFunction() {
var x = document.getElementById("leftsidebar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
padding-top: 5px;
background: #efefef;
color: #000;
font: 10pt/18pt Arial, sans-serif;
border-top: 6px;
}
#navbar {
max-width: 928px;
font-size: 22px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
padding: 10px;
font-size: 2em;
font-weight: bold;
background-color: #4596d8;
margin-bottom: -4px;
}
#content {
display: flex;
max-width: 946px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
font-size: 2em;
font-weight: bold;
margin-bottom: -4px;
background: #FFF;
}
#leftsidebar {
width: 200px;
border-right: 2px solid #4596d8;
}
#leftsidebar ui a {
display: block;
font-size: 18px;
color: black;
width: 100%;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: 1px solid red rgba(255, 255, 255, .1);
border-bottom: solid 1px;
text-decoration: none;
}
#leftsidebar ui a:hover {
background-color: #4596d8;
}
#maincontent {
width: 728px;
padding: 10px;
padding-top: 5px;
font: 10pt/18pt Arial, sans-serif;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
border-width: 6px;
}
div {
display: block;
}
#container {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
padding: 0;
}
table {
margin-left: 20%;
margin-right: 20%;
border: 1px solid #4596d8;
}
form {
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer {
text-align: center;
margin: 0 auto;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
#media screen and (max-width: 600px) {
.leftsidebar a:not(:first-child) {
display: none;
}
.leftsidebar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.leftsidebar.responsive {
position: relative;
}
.leftsidebar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
#navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="navbar">
MySite
</div>
<div id="content">
<div id="leftsidebar">
<ui>
Site1
Site2
Site3
<a href="site4.html" class="w3-bar-item w3-button">Site4/a>
Site5
</ui>
</div>
When I resize my site everything stays the same, nothing changes. I changed the lines so many times and nothing changed. Besides this problem everything else I could solve on my own.
My code is from this example. The only difference from the example site is, that my websites navbar is on the left and my logo in in the top navbar. So when I resize it or am on a certain width the menu elements are in the navbar hidden behind a icon.
You where using the .leftsidebar selector (class selector) instead of #leftsidebar the ID selector. The element doesnt have a class so you have to use #leftsidebar
function myFunction() {
var x = document.getElementById("leftsidebar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
padding-top: 5px;
background: #efefef;
color: #000;
font: 10pt/18pt Arial, sans-serif;
border-top: 6px;
}
#navbar {
max-width: 928px;
font-size: 22px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
padding: 10px;
font-size: 2em;
font-weight: bold;
background-color: #4596d8;
margin-bottom: -4px;
}
#content {
display: flex;
max-width: 946px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
font-size: 2em;
font-weight: bold;
margin-bottom: -4px;
background: #FFF;
}
#leftsidebar {
width: 200px;
border-right: 2px solid #4596d8;
}
#leftsidebar ui a {
display: block;
font-size: 18px;
color: black;
width: 100%;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: 1px solid red rgba(255, 255, 255, .1);
border-bottom: solid 1px;
text-decoration: none;
}
#leftsidebar ui a:hover {
background-color: #4596d8;
}
#maincontent {
width: 728px;
padding: 10px;
padding-top: 5px;
font: 10pt/18pt Arial, sans-serif;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
border-width: 6px;
}
div {
display: block;
}
#container {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
padding: 0;
}
table {
margin-left: 20%;
margin-right: 20%;
border: 1px solid #4596d8;
}
form {
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer {
text-align: center;
margin: 0 auto;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
#media screen and (max-width: 600px) {
#leftsidebar a:not(:first-child) {
display: none;
}
#leftsidebar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
#leftsidebar.responsive {
position: relative;
}
#leftsidebar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
#navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="navbar">
MySite
</div>
<div id="content">
<div id="leftsidebar">
<ui>
Site1
Site2
Site3
<a href="site4.html" class="w3-bar-item w3-button">Site4/a>
Site5
</ui>
</div>
Your code has a lot of bugs. Firstly the ui (unordered list) has to have li as it children. Anything besides an li as a ui child is a bug. Though you can have your link inside li you cannot have it as child of ui directly. If you put value 0 as border it doesn't work and is a bug. You should value it as none instead of 0 so border: none; the same with background padding and outline it should have a value of none.
Margin cant be both 0 and auto just say auto instead of 0 auto. You should also see some actual code of others. You are using code like english not like computer you have used a lot uneccesary css properties. Watch others coding youtube. You can use padding and margin the best way instead of writing padding left padding top. Just use thus syntax: padding: top right bottom left;
For example padding: 0 9px 0 9px;
For your media queries search on internet and use #media only screen and (max-width: 600px) {} device that has 600 px width like a mobile
Dont use the same value use a different value.
#media only screen and (max-width: 900px) {} this implements on a 900px width device like tablet.
What's good StackOverflow? I've been trying to figure out for the longest while now why Gmail isn't picking up on my HTML Email's Media Query. It looks good with wide screen but Gmail isn't responding to my phone's screen width, so on phone looks weird and buggy.
I've already tried looking through similar questions, and even tried re-writing my CSS to the point to where I re-wrote my CSS several times to see if the media query would pick up even the smallest of change.
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width ,initial-scale=1" />
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body {
margin: 0;
padding: 15px;
}
.center {
text-align: center;
margin: 0 auto;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
.inner-wrapper {
width: 100%;
max-width: 670px;
background: #554348;
margin: 0 auto;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #727f80;
}
.header-table {
text-align: center;
padding: 10px 0px 0 0;
}
.header-table .header {
width: 100%;
max-width: 610px;
display: inline-block;
background: #fff;
border-top: 2px solid #E5C2C0;
border-radius: 6px 6px 0 0;
padding-bottom: 24px;
}
.header-table img {
width: 75px;
float: left;
border: 2px solid #E5C2C0;
border-radius: 6px 0 0 0;
border-top: none;
}
.slogan {
color: #000;
font-size: 12px;
margin-top: 124px;
color: #7FC29B;
}
.slogan-hr {
width: 25vh;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
}
.outer-table img {
width: 100%;
max-width: 670px;
height: auto;
}
td {
padding: 0;
}
p {
margin: 0;
}
a {
color: #f1f1f1;
text-decoration: none;
}
.main-table {
width: 100%;
max-width: 610px;
margin: 0 auto;
border-radius: 6px;
margin-top: 25px;
margin-bottom: 25px;
background: #fff;
}
.three-column {
width: 100%;
}
.three-column img {
width: 120px;
}
.section {
/* Change display to inline-block on mobile */
width: 100%;
display: inline-flex;
margin-top: 15px;
margin-left: 30px;
}
.section .pic-container {
display: inline-block;
}
.section .desc-container {
margin: auto;
}
.desc-container td {
padding-bottom: 25px;
}
.desc-container .content {
margin-top: 32px;
}
.desc-table p {
margin-top: 5px;
margin-bottom: 10px;
}
.desc-table .h3 {
font-weight: bold;
text-transform: uppercase;
color: #424B54;
}
.desc-table .price {
font-size: 20px;
font-family: 'Libre Baskerville', serif;
color: #7FC29B;
}
.button-container {
margin-right: 90px;
margin-top: 65px;
height: 35px;
}
.btn-holder {
font-size: 25px;
padding: 9px;
border-radius: 25px;
color: #fff;
background: #4C4B63;
text-decoration: none;
}
.outer-table-2 {
width: 100%;
max-width: 670px !important;
background: #fff;
border-top: 3px solid #D4F5F5;
border-bottom: 3px solid #D4F5F5;
}
.call-to-action {
width: 100%;
max-width: 670px;
text-align: center;
}
.cta-text {
font-size: 24px;
margin-top: 30px;
margin-bottom: 30px;
color: #4C4B63;
}
.cta-button {
margin-top: 30px;
margin-bottom: 30px;
}
.outer-table-3 {
margin-top: 30px;
width: 100%;
max-width: 670px;
background: #4C4B63;
border-top: 2px solid #7FC29B;
border-radius: 6px 6px 0 0;
}
.footer-table {
width: 100%;
margin-top: 32px;
}
.footer-header-table {
width: 100%;
}
.footer-header {
color: #fff;
text-align: center;
}
.footer-header .heart {
color: red;
}
.footer-logo-table {
float: left;
}
.footer-logo {
width: 67px;
}
.footer-social-table {
width: 100%;
text-align: center;
}
.social-list {
display: inline-flex;
list-style: none;
}
.social-list li {
margin-left: 10px;
margin-right: 10px;
}
.social-list img {
width: 55px;
}
.footer-text-table {
float: right;
text-align: right;
margin-top: 25px;
}
.footer {
font-size: 12px;
color: #fff;
}
.footer a {
text-transform: uppercase;
color: red;
}
#media only screen and (max-width:360px) {
.cta-button .btn-holder {
font-size: 18px !important;
}
.footer-social-table {
width: 100%;
}
.social-list img {
width: 50px;
}
}
#media only screen and (max-width:768px) {
.wrapper {
overflow: hidden;
}
.section {
display: inline-block;
margin: 0;
margin-top: 15px;
text-align: center;
}
.pic .content {
width: 100%;
}
.section .home {
width: 65%;
}
.desc-container {
width: 100%;
}
.desc-table {
margin: 0 auto;
}
.desc-table .h3 {
font-size: 20px;
}
.desc-table .price {
font-size: 24px;
}
.size {
font-size: 20px;
}
.section .button-container {
margin-top: 25px;
margin-bottom: 25px;
width: 100%;
}
.button-container .button-table {
margin: 0 auto;
padding-bottom: 25px;
}
.outer-table-2 {
width: 100%;
}
.cta-button .btn-holder {
font-size: 23px;
}
.outer-table-3 {
width: 100%;
}
.footer-social-table {
width: 100%;
}
.social-list {
padding: 0;
}
}
</style>
</head>
I figured it was because it was because the #media screen and it had to be either "#media only screen" or "#media (){..." but none of those did anything.
What I expected (running on web browser) vs what actually happens (gmail app)
Here's a link to the whole code:
JSFiddle
Even if you can't help, thank you for reading.
UPDATE!!!
Thanks to Digital_Frankenstein, I was able to fix the problem. What I should've done was add some !important tags on my CSS, and specifically on the media queries. For future HTML Email Devs, don't forget this. Because this is really important.
took me a while to debug this, taking section by section out.
I hate default styles in the head. Makes it so much harder to debug, but each to their own and I know a lot of people are shifting to that method because of the Gmail update.
To resolve your issues in Gmail:
You need to add !important to all media query CSS, to override default styling.
Your slogan-hr was pushing everything out because of it's vh base width. In your media query I added an override of width:90%!important;.
You need to reduce the font size of your last button. It's blowing out at 23px in Gmail. I would suggest 20px maybe?
Your footer doesn't look too great. Best if you fiddle with that further, as both items sitting right up against the edges doesn't look great.
Finally, I would suggest avoiding this technique if you aren't completely confident with it.
I personally don't see the worth in it, since Gmail started rendering responsive code, but I know some devs use it for the outlier mobile email clients and that makes sense.
But I stick with old school tables since it just works and my clients will be managing the templates.
If I were always available to update and manage the templates I build, then it makes sense.
Just some food for thought. Hope this resolves your issues :)
In My case, actually I was using the other syntax which was working fine in other place but not in gmail so if you are using this syntax
#media only screen and (max-width: 480px) {
table[class="w320"] {
width: 320px !important;
}
This works fine in all other places but not in gmail app, so for that use the better syntax:
#media only screen and (max-width: 480px) {
table.w320{
width: 320px !important;
}
}
Hello I'm trying to blot out the horizontal scroll bar from my site.Below I have post two pictures which display that the problem appears in two div elements.
this picture display the problematic div
but I haven't this two lines of code
.row { margin-left: -15px; margin-right: -15px; }
in my CSS file.
This refers to file with name grid-framework.less.
Could you anyone help me to solve this bug?
Thanks.
Here is the code of my CSS file.
#font-face {
font-family: OpenSans Bold;
src: url('OpenSans-Bold.ttf');
}
header .navbar-default {
background: url("/diary/pictures/home-banner-background.jpg") no-repeat center center fixed;
background-size: cover;
max-width: 100%;
height: 120px;
margin: 0 auto;
}
.navbar-left img {
max-width: 200px;
margin-left: 15px;
margin-top: 25px;
}
/* search and date picker*/
.date {
margin-top: 5px;
}
.row .col-lg-2 {
padding: 4px;
margin-top: 1px;
margin-left: 25px;
}
.col-lg-2 b {
font-size: 16px;
}
.glyphicon-calendar {
padding: 4px;
margin-top: 1px;
}
.search {
padding: 4px;
margin-top: 1px;
margin-right: -5px;
position: relative;
}
.search span {
padding: 4px;
}
/* body */
.body-page {
background: #C6C6C6;
max-width: 100%;
height: 865px;
margin: 0 auto;
}
.table-responsive {
max-width: 90%;
float: right;
padding-right: 200px;
margin-right: 50px;
/*
padding-right: 200px;*/
}
th > a {
border-radius: 2px;
}
tbody tr:last-child a {
background-color: #5cb85c;
color: #ffffff;
border-radius: 2px;
padding: 3px 4px;
text-decoration: none;
font-family: OpenSans;
}
tbody tr:nth-last-child(2) a {
text-decoration: none;
color: black;
padding-left: 2px;
font-family: OpenSans;
}
tbody tr:nth-last-child(3) a {
text-decoration: none;
color: #ffffff;
background-color: #f92b2b;
border-radius: 2px;
padding: 3px 4px;
}
#table_3 > tbody tr {
font-family: OpenSans;
}
#table_2 > tbody tr {
font-family: OpenSans;
}
.table {
font-family: OpenSans;
}
.glyphicon-remove {
margin-left: 8px;
}
#access_1 {
padding-left: 20px;
max-width: 20%;
float: left;
}
#table_2 {
height: 240px;
width: 240px;
}
#table_3 {
margin-top: 20px;
height: 240px;
width: 240px;
}
/*footer*/
footer {
background-color: #3F3C3C;
max-width: 100%;
height: 60px;
}
footer .report {
width: 300px;
float: right;
padding-top: 18px;
}
footer .report a {
text-decoration: none;
color: #ffffff;
margin-right: 5px;
}
footer a:hover {
cursor: pointer;
color: #f9a42b;
}
I am pretty new to web development. I have basic experience with html/css and am using bootstrap to create a website just to kind of teach myself. I want my image to cover the whole page which it does when i decrease the size of the browser but when using full screen it adds padding to the side.
full screen example
i have tried some things to fix it like changing padding to -20px or making overflow-x hidden but can't seem to fix it.
bootstrap code
<div id="banner" class="container-fluid">
<div class="col-lg-12 nopadding">
<img src="images/headercopy.jpeg">
</div>
</div>
css code
html, body {
line-height: 1.8;
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h3 {
text-align: center;
color: white;
}
.nav {
color: white;
}
.navbar-transparent .navbar-brand {
color: white; //nightalreadycolor
}
.navbar-collapse .page-scroll {
color: white; //nightalreadycolor
}
.navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus {
background-color: transparent;
color: #c8e8f4; //light blue
}
.navbar .navbar-transparent .navbar-fixed-type {
background-color: red;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.aboutimage {
background-size: 100% 100%;
}
img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#about {
color: white;
height: 600px;
margin-right: 15px;
text-align: justify;
}
#about p {
display: block;
font-size: 20px;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
color: white;
}
#about p img {
padding-top: 5px;
outline: solid #f00 1px !important;
}
.container {}
#fleet {
border-right: thin solid black;
color: white;
width: 50%;
height: 600px;
float: left;
background-color: grey;
}
#fleet h1 {
text-align: center;
}
#fleet h2 {
padding-right: 10%;
float: right;
}
#rates {
color: white;
width: 50%;
height: 600px;
float: right;
background-color: #574951;
}
#rates h1 {
text-align: center;
}
#contact {
text-align: center;
height: 600px;
color: white;
background-color: #574951;
}
#reservation {
display: inline-block;
height: 600px;
color: white;
text-align: center;
}
Sorry if some of my code seems to be redundant or inefficient like i said I'm still very new to all of this. If there's any other information you need let me know.
Use images as a background. So if it's the #banner div that you want to fill up, your css will be like this:
#banner {
background-image: url('images/headercopy.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Then you just have to use this markup:
<div id="banner" class="container-fluid"></div>
Of course you can set to your css code for the #banner the height you want etc.