I have this pen here, and when it hits it media query (max-width: 475px) the button in the banner is supposed to drop below the text and center itself in the banner. My issue is that the button begins on the right side above the media query, and then needs to drop and center. I have looked here, here and this stackoverflow, as well as this one, and this one, as well as this stack and this one, but to no avail.
If someone could please jump on my codepen at < 425px and help me figure out whats missing, that would be great.
Here is the code dump
<!DOCTYPE html>
<html>
<head>
<base href="https://s3.ca-central-1.amazonaws.com/whatever/index.esm.js"/>
<style>
* {
box-sizing: border-box;
}
#banner-container {
padding: 32px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(231,248,250,1) 0%, rgba(220,255,226,1) 100%);
display: flex;
flex-direction: row;
height: 152px;
position: relative;
width: 100%;
}
#button-container {
position: absolute;
right: 32px;
transform: translateY(-50%);
top: 50%;
}
#cta-button {
width: 192px;
height: 60px;
padding: 16px 23px 16px 21px;
border-radius: 30px;
background-color: #16a55a;
cursor: pointer;
border: none;
}
#cta-button:hover {
box-shadow: 0 5px 10px 0 rgba(22, 165, 90, 0.5);
}
#cta-button:active {
background-color: #05823f;
}
#cta-button span {
font-family: Lato, sans-serif;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
#media screen and (max-width: 475px) {
#banner-container {
height: 200px;
}
#button-container {
margin-top: 20px !important;
transform: translateX(-50%);
left: 50%;
}
#cta-button {
margin: 0 auto;
}
#text-container {
margin: 0 auto;
}
}
#top-text {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #3c4142;
}
#main-text {
font-family: Lato, sans-serif;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #404040;
}
#bottom-text {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #3c4142;
}
#text-container {
}
#text-container span {
line-height: 20px;
display: flex;
flex-direction: column;
}
#text-container span:nth-child(2), #text-container span:nth-child(3) {
margin-top: 8px;
}
</style>
</head>
<body>
<div id="banner-container">
<div id="text-container">
<span id="top-text">Partner exclusive webinar</span>
<span id="main-text">Be a sales beast</span>
<span id="bottom-text">May 4 | 1 pm EST</span>
</div>
<div id="button-container">
<button id="cta-button">
<span>Register now</span>
</button>
</div>
</div>
</body>
</html>
Rule of thumb: if you can avoid Absolute positioning, Do so.
There's no need for Absolute positioning here, Simple flex layout can achieve what you want
Old:
#button-container {
position: absolute;
right: 32px;
transform: translateY(-50%);
top: 50%;
}
New:
#button-container {
align-self: center;
margin-left: auto;
}
Gives the same effect
align-self: center; centers Vertically
margin-left: auto; consumes all the space between the left side of the button and the right side of the first sibling More on this
And when the media hits
#media screen and (max-width: 475px) {
#banner-container {
height: 200px;
flex-direction: column; /* Drop the button down */
}
#button-container {
margin: 0 auto; /* to center */
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#banner-container {
padding: 32px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(231,248,250,1) 0%, rgba(220,255,226,1) 100%);
display: flex;
flex-direction: row;
height: 152px;
position: relative;
width: 100%;
}
#button-container {
align-self: center;
margin-left: auto;
}
#cta-button {
width: 192px;
height: 60px;
padding: 16px 23px 16px 21px;
border-radius: 30px;
background-color: #16a55a;
cursor: pointer;
border: none;
}
#cta-button:hover {
box-shadow: 0 5px 10px 0 rgba(22, 165, 90, 0.5);
}
#cta-button:active {
background-color: #05823f;
}
#cta-button span {
font-family: Lato, sans-serif;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
#media screen and (max-width: 475px) {
#banner-container {
height: 200px;
flex-direction: column;
}
#button-container {
margin: 0 auto;
}
#cta-button {
margin: 0 auto;
}
#text-container {
margin: 0 auto;
}
}
#top-text {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #3c4142;
}
#main-text {
font-family: Lato, sans-serif;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #404040;
}
#bottom-text {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #3c4142;
}
#text-container {
}
#text-container span {
line-height: 20px;
display: flex;
flex-direction: column;
}
#text-container span:nth-child(2), #text-container span:nth-child(3) {
margin-top: 8px;
}
<div id="banner-container">
<div id="text-container">
<span id="top-text">Partner exclusive webinar</span>
<span id="main-text">Be a sales beast</span>
<span id="bottom-text">May 4 | 1 pm EST</span>
</div>
<div id="button-container">
<button id="cta-button">
<span>Register now</span>
</button>
</div>
</div>
Related
I'm a backend developer helping someone with an Angular webapplication and I ran into an issue when adding the fonts of our company, he uses material.
The red part is a mat-sidenav block and the blue is mat-sidenav-content the yellow part is some margin that suddenly is that big when I changed the fonts.
In devtools it looks like this:
so there is somewhere an element.style setting the margin but can't seem to find it in the code. Now the strange thing is if I dragged the tab out of chrome as a seperate window the issue is resolved but I don't think users will like doing that. Any clue why the margin changes and how I can resolve this permanently?
/* VAriables */
:root {
--color-accent: black; /* Fallback */
}
.u-category-test { --color-accent: rgba(67, 119, 64, 0.5); }
.u-category-qa { --color-accent: rgba(153, 100, 19, 0.5); }
.u-category-prod { --color-accent: rgba(216, 3, 3, 0.5); }
/* Nav */
.nav-header {
position: relative;
padding: 2rem;
}
.nav-title {
text-transform: uppercase;
font-weight: 300;
line-height: 1;
margin: 0;
}
.nav-title strong {
font-weight: 600;
}
.nav-header-icon {
position: absolute;
width: 36px;
height: 36px;
top: 1.5rem; /* magic */
right: 1.75rem; /* magic */
}
.nav-item {
padding: .5em 0.5em 0.5em 0;
}
.nav-icon {
width: 16px;
height: 16px;
vertical-align: top;
margin-right: .25rem;
}
.nav-category {
margin: .2em 0;
padding-left: 2rem;
font-size: 11px;
font-weight: normal;
text-transform: uppercase;
}
.nav-button {
display: block;
width: 100%;
padding: .2rem;
padding-left: calc(2rem + 16px + .5rem); /* padding + icon + magic */
line-height: 2;
text-align: left;
font: inherit;
font-size: 13px;
color: inherit;
border: none;
background-color: transparent;
cursor: default;
outline: none;
}
.nav-button:hover,
.nav-button:focus:not(.is-selected) {
background-color: hsla(0,0%,0%,.1);
}
.nav-button.is-selected {
background-color: var(--color-accent);
}
.nav-button.is-selected,
.nav-button.is-selected em {
color: #fff;
}
.nav-button.is-selected:focus {
opacity: .8;
}
.nav-button em {
font-style: normal;
font-weight: 600;
pointer-events: none; /* makes it invisible to clicks */
}
.nav-footer {
margin-top: 1rem;
padding: 2rem;
border-top: 1px solid var(--color-border);
text-align: center;
}
.nav-footer-version {
display: block;
width: 100%;
padding: 0;
margin-bottom: .75rem;
line-height: 2;
text-align: left;
font: inherit;
font-size: 13px;
color: inherit;
border: none;
background-color: transparent;
cursor: default;
outline: none;
text-align: center;
}
#button-download {
background-color: rgba(196, 196, 196, 0.5);
}
#button-download:hover {
background-color: rgba(150, 150, 150, 0.5);
}
.client-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #eee;
}
.main {
height: 100%;
}
<header class="nav-header">
<h1 class="nav-title">Clients</h1>
</header>
<div class="nav-item">
<h5 class="nav-category">
<span class="nav-icon flag-icon flag-icon-be"></span>
Client
</h5>
<button type="button" class="u-category-test nav-button" id="button-test" routerLink="test" routerLinkActive="is-selected">Dev</button>
<button type="button" class="u-category-qa nav-button" id="button-qa" routerLink="qa" routerLinkActive="is-selected">QA</button>
<button type="button" class="u-category-prod nav-button" id="button-prod" routerLink="prod" routerLinkActive="is-selected">Production</button>
</div>
.client-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #eee;
}
.main {
height: 100%;
}
#font-face {
font-family: 'Custom';
src: url('/assets/fonts/Custom.ttf') format('truetype');
}
* {
box-sizing: border-box;
}
html {
height: 100%;
font-family: 'Custom', 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
font-size: 14px;
line-height: 1.5;
overflow: hidden; /* Prevents rubber-band scrolling of the whole "page" */
color: var(--color);
background-color: #fff; /* To cover OSes with no default background color */
}
body {
margin: 0;
height: 100%;
display: flex;
}
h1,
h2,
h3 {
margin-top: 0;
line-height: 1.5;
}
h1 {
font-family: 'Custom';
font-size: 48px;
font-weight: normal;
}
h2 {
font-family: 'Custom';
font-weight: normal;
letter-spacing: -1px;
font-size: 16px;
}
h3, h4 {
font-family: 'Custom';
font-weight: normal;
font-size: 16px;
text-transform: uppercase;
}
h5{
font-family: 'Custom';
font-weight: normal;
font-size: 30px;
}
table {
width: 100%;
border-spacing: 0;
border: 1px solid hsla(0,0%,0%,.08);
border-width: 0 1px 1px 0;
}
th {
background-color: hsla(0,0%,50%,.06);
}
th,
td {
text-align: center;
border: 1px solid hsla(0,0%,0%,.08);
border-width: 1px 0 0 1px;
}
div.main{
padding: 30px;
button{
font-family: 'Custom';
margin: 10px;
}
button:hover{
background-color: transparent;
color:black;
}
}
<mat-sidenav-container class="client-container">
<mat-sidenav mode="side" opened><app-side-nav></app-side-nav></mat-sidenav>
<mat-sidenav-content>
<div class="main mat-app-background">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
What helped me was applying position: unset to mat-sidenav-container. This element by default has position: relative.
Interestingly I had this problem only with multiple sidenavs.
<mat-sidenav-container>
<mat-sidenav mode="side" position="start" opened>
<desktop-main-navigation></desktop-main-navigation>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
<mat-sidenav mode="over" position="end">
Notifications
</mat-sidenav>
</mat-sidenav-container>
Your specific issue and fact it happened when adding fonts might has been explained here:
https://stackoverflow.com/a/56219106/2804285
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 4 years ago.
Improve this question
I am creating some tags -- and have a bit of markup like this
<div class="tag">Tag</div>
and this will create a small white border round tag. It could have different media variants and in this instance want to add an icon to the tag, I'm trying to architect the less but its not taking hold.
<div class="tag .get_app">Tag</div>
<div class="tag .get_app">Tag</div>
<div class="tag .get_app">Tag</div>
http://jsfiddle.net/pg886/182/
.tag {
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
border-radius: 20px;
padding: 11px 35px 9px 20px;
color: pink;
background: white;
display: inline-block;
text-shadow: none;
font-size: 12px;
font-weight: 700;
line-height: 12px;
font-family: Roboto, sans-serif;
&::after {
position: absolute;
top: 6px;
right: 6px;
border-radius: 50%;
background: red;
padding: 4px;
display: inline-block;
color: white;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
text-transform: none;
.get_app & {
content: "\E884";
}
.play_arrow & {
content: "\E037";
}
.volume_up & {
content: "\E050";
}
}
}
First of all, you have written your classes wrong in the HTML. You need to add them like this:
<div class="tag get_app">Tag</div>
<div class="tag play_arrow">Tag</div>
<div class="tag volume_up">Tag</div>
The extra classes are on the tag-class as well, so you need to set them right:
.tag {
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
border-radius: 20px;
padding: 11px 35px 9px 20px;
color: pink;
background: white;
display: inline-block;
text-shadow: none;
font-size: 12px;
font-weight: 700;
line-height: 12px;
font-family: Roboto, sans-serif;
&::after {
position: absolute;
top: 6px;
right: 6px;
border-radius: 50%;
background: red;
padding: 4px;
display: inline-block;
color: white;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
text-transform: none;
}
&.get_app::after {
content: "\E884";
}
&.play_arrow::after {
content: "\E037";
}
&.volume_up::after {
content: "\E050";
}
}
JS Fiddle
Your syntax is wrong in your LESS file and you HTML class
Here is an updated fiddle
Your LESS for you .tag should look like this:
.tag {
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
border-radius: 20px;
padding: 11px 35px 9px 20px;
color: pink;
background: white;
display: inline-block;
text-shadow: none;
font-size: 12px;
font-weight: 700;
line-height: 12px;
font-family: Roboto, sans-serif;
&::after {
position: absolute;
top: 6px;
right: 6px;
border-radius: 50%;
background: red;
padding: 4px;
display: inline-block;
color: white;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
text-transform: none;
}
&.get_app:after {
content: "\E884";
}
&.play_arrow:after {
content: "\E037";
}
&.volume_up:after {
content: "\E050";
}
}
And you have put the class . in you actual HTML class:
<div class="tag .get_app">Tag</div>
Should be:
<div class="tag get_app">Tag</div>
I made have made my first CSS class, but I have got a little problem, the buttons are centered, but thats not what I want.
View: http://prntscr.com/6i30xg
I would like them so they start at the left side only. But when using float: left;to the .body class it will results in
View: http://prntscr.com/6i327q
But I would like that the buttons are on the edge like the homepage.
#import url(http://fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic);
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6
{
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1
{
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2
{
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3
{
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4
{
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5
{
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6
{
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
p
{
margin-top: 0;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn
{
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.btn
/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Programming :D
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code
{
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
.header
{
}
.header span
{
color: #fff;
float: left;
margin-left: 28px;
margin-top: 28px;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 24px;
}
.header ul
{
color: #fff;
float: right;
margin-right: 28px;
margin-top: 28px;
}
.header ul li
{
float: right;
border: 1px solid #fff;
padding: 5px 20px;
border-radius: 11px;
margin-right: 12px;
}
.header ul li a
{
color: #fff;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 11px;
text-decoration: none;
}
.body
{
padding-top: 148px;
}
.footer
{
}
Just remove margin-left: auto; and margin-right:auto; from your content class. OR You can replace auto with any fixed number of pixels like 10px. Setting the margins left and right to auto makes the content to align center of the page. So do not use auto.
You content class should look like,
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: <some value in pixels>;
margin-right: <some value in pixels>;
min-height: 100%;
}
Remove text-align: center; from .btn class
i'm trying to have the height auto adjust based on the content that's in the div.. i realize to do this, I shouldn't have a height: xpx;.
my popover is:
.popover {
position: absolute;
top: 0;
left: 0;
height: 120px;
z-index: 1010;
display: none;
max-width: 276px;
text-align: left;
white-space: normal;
background: #fff;
padding: 10px;
font-size: 12px;
}
what's currently in the div of that popover is:
span.details{
display: block;
font-family: Georgia,serif;
margin: 0 0 15px 0;
color: #888;
}
span.status{
display: block;
margin-bottom: 10px;
margin-top: -7px;
}
span.status strong{
font-size:x-small;
vertical-align:top;
}
span.date{
display: inline-block;
float: right;
font-style: italic;
font-weight: bold;
font-size: 11px;
}
span.url{
display: inline-block;
font-style: italic;
font-size: 12px;
font-family: "Arial Black", Gadget, sans-serif;
margin-right: 5px;
}
what it looks like without the height: 120px;
http://sc-cdn.scaleengine.net/i/2952f44fb396097037f8f5eaeabc52cd.png
what it looks like with the height: 120px;
http://sc-cdn.scaleengine.net/i/614d383b7cba18a7f7a9bc017f53b9c4.png
any ideas here guys? i just want it to adjust to whatever is in the box!
.popover {
display:block;height:100%
}
try this
What I'm willing to achieve is some kind of dividers that are used on http://mintteal.com/ under the captions. There is an icon inside, but I've yet failed to create such horizontal line on both sides.
You could have a peek at their HTML/CSS to learn how they did it. Here is what they have:
<div class="title">
<h1>What We Do</h1>
<i class="fi-wrench"></i>
</div>
<style>
div.title {
text-transform: uppercase;
text-align: center;
letter-spacing: 0.01em;
font-weight: 700;
position: relative;
margin-bottom: 60px;
padding-bottom: 30px;
}
.title h1 {
font-size: 48px;
margin: 0;
}
.fi-wrench::before {
content: "\f215";
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
}
div.title i {
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -20px;
border: 3px solid #41c39f;
width: 40px;
height: 40px;
line-height: 37px;
background: #f4f4f5;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-align: center;
}
</style>
Perhaps this is what you wanted Demo.
The divider is made by the :before tag. And the content inside makes up the image.