My button's text leaks out of the container if I zoom it. When I zoom the button's text flows out of the container. What I want is for it to adjust its font size and stay in the container and don't leak out.
.wrapper a {
position: relative;
display: block;
width: 8.5vw;
height: 7vh;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #05386b;
border: 2px solid #05386b;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
.wrapper a span {
position: relative;
z-index: 2;
}
.wrapper a:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: #EDF5E1;
transition: all .35s;
}
.wrapper a:hover {
color: #8ee4af;
}
.wrapper a:hover:after {
width: 100%;
}
<div className="wrapper">
<Link to="/orders"><span>Returns <br/> <b>& Orders</b></span></Link>
</div>
You could take a look at the #media css rule. It can be used to create responsive webpages.
For example the following increases the font size by 2 pixels if the screen size is smaller than 786px.
#media only screen and (max-width: 786px) {
.wrapper a {
font-size: 20px;
}
}
To prevent the content from overflowing all together you might want to take a look at the overflow css property. It controls the way content overflows from the containing area. Might not be applicable to your case though as you are talking about making a button here.
Related
I'm having trouble with a SCSS/CSS styling idea, I want to fill the space before or after the last line of a heading with a solid line. The last line of text does not have a set width (it varies depending on screen size) I'm open to any suggestions.
Here's what I want to achieve when the text is aligned right or left.
|Here is some text on screen| |Here is some text on screen|
|very cool -----------------| or |----------------- very cool|
| | | |
| | | |
EDIT Code added for clarity:
HTML
<h1>You're the painter, we just want to see you paint.</h1>
CSS (that is how far I've got)
h1{
font-family: "doesntMatter";
font-style: bold;
font-size: 2rem;
text-align: left;
}
h1::after{
display: inline-block;
line-height: 0;
position: relative;
bottom: 2.5rem;
border-bottom: 10px solid red;
width: 100%;
content: "";
}
I found a solution to my problem, if you take this code here and run it, the last line will be struck through.
.container {
width: 100%;
padding-inline: 2rem;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
overflow-x:hidden;
}
.text::after {
position: absolute;
left:0;
bottom: 0.9rem;
width: 100%;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
But if you remove left:0; from the text::after styling, it magically jumps over to fill the blank space at the end.
I added a margin-left: 1rem to give the things some breathing room but yea I really don't know what's going on.
I don't know how it works but it just kind of does, if the .text{} element has overflow-x: hidden applied to it then the effect will cutoff at the width of the header.
.container {
width: 100%;
padding-inline: 2rem;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
overflow-x: hidden;
}
.text::after {
position: absolute;
bottom: 0.9rem;
width: 100%;
margin-left: 1rem;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
That is one way to do the effect, if you want the line to spill off the page, you apply overflow-x: hidden to the .container{} element and remove if from the .text{}... since my container is 100% width the line goes off the page and works as intended.
.container {
width: 100%;
padding-inline: 2rem;
overflow-x: hidden;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
}
.text::after {
position: absolute;
bottom: 0.9rem;
width: 100%;
margin-left: 1rem;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
The line responds to any changes in the width of the last line. There's a few edge cases that I'm going to have to look into like if the last line of text practically fills the entire width of the header, then there's just a little nub at the end.
But it's been fixed! I hope this helps anyone in the future that couldn't figure out the right combination of words to google to find a solution.
Building on what you have already, this snippet puts the text within a span element. This enables a white padding which can overwrite that part of the red line which is under the actual text.
h1 {
font-family: "doesntMatter";
font-style: bold;
font-size: 2rem;
text-align: left;
position: relative;
}
h1>span::after {
display: inline-block;
position: absolute;
border-bottom: 10px solid red;
width: 100%;
left: 0;
margin-top: -11px;
content: "X";
color: transparent;
z-index: -1;
}
h1>span {
background: white;
padding-bottom: 11px;
}
<h1><span>You're the painter, we just want to see you paint.</span></h1>
Note - it's a little bit hacky, including positioning 1px different from the height of the line. This is because on modern screens which use more than one screen pixel for a CSS pixel the system can 'leave behind' traces of color when it is positioning (e.g. a screen pixel - not a whole CSS pixel).
So I have a div that displays a big title with two lines on its sides that fill the rest of the width.
However now I need to have some text drawn behind this, and because I am drawing the title's bars with background-color they are drawn behind the text.
How can I draw it in such a way that the displayed components from back to front are [bg background-color]->[bg:before]->[title:before/after background-color]->[title]?
Here is the code I have:
#bg
{
width: 100%;
height: 100%;
background-color: silver;
z-index: -1;
}
#bg:before
{
content: 'Background';
position: absolute;
font-size: 3em;
color: white;
user-select: none;
}
#bg *
{
z-index: 0;
}
.title
{
display: flex;
flex-direction: row;
align-items: center;
}
.title:after, .title:before
{
content: '';
width: 50%;
background-color: black;
height: 0.2em;
margin-left: 20px;
margin-right: 20px;
}
.section_titre h1
{
font-size: 1em;
margin: 0px;
}
<div id="bg">
<div class="title">
<h1>Example</h1>
</div>
</div>
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
We use z-index
The of Back to front
[bg background-color] -> [bg:before] -> [title:before/after background-color] -> [title]
So,
Firstly add z-index(1) to bg background-color
#bg{
z-index: 1;
position:relative;// z-index work with other than static position
}
Here,I used position:relative;. Why? Using positioning in z-index?
z-index has no effect on this element since it’s not a positioned element. Try setting its position property to something other than static.
Then add z-index(2) to bg:before
#bg:before {z-index:2;}
Then add z-index(3) to title:before/after background-color
.title:after, .title:before {z-index:3;}
Finally z-index(4) to title
.title{z-index:4;position:relative;}
Working Demo
#bg{
width: 100%;
height: 100%;
background-color: silver;
z-index: 1;
position:relative;
}
#bg:before{
content: 'Background';
position: absolute;
font-size: 3em;
color: white;
user-select: none;
z-index:2;
}
.title{
display: flex;
flex-direction: row;
align-items: center;
z-index:4;
position:relative;
}
.title:after, .title:before{
content: '';
width: 50%;
background-color: black;
height: 0.2em;
margin-left: 20px;
margin-right: 20px;
z-index:3;
}
.section_titre h1{
font-size: 1em;
margin: 0px;
}
<div id="bg">
<div class="title">
<h1>Example</h1>
</div>
</div>
I got problem with 2 elements from my header since 3 days,and cannot fix it.The problem is there that my "Search-trigger" which is my search icon and "tablet-icon" which is icon which is showing only on given browser width,are overlapping.Even search icon is going beyond tablet icon when browser is really tiny width.I tried with Float:right,leftand position:absolue,relative on both elements ,overflow:auto on site header,margin:left,righton elements and display properties on both elements display:block ,display:inline-block; Nothing works... i don't know where is the problem..
/***********************************************
Header Style
************************************************/
.admin-bar .site-header {
top: 32px;
}
.admin-bar .site-header.is-fixed {
top: -47px;
}
#media screen and (min-width:640px) and (max-width:790px){
.admin-bar .site-header.is-fixed{
top :-44px;
}
}
#media screen and (min-width:413px) and (max-width:783px){
.admin-bar .site-header{
top: 35px;
}
}
.site-header {
position: absolute;
top: 0;
left: 0;
right:0;
height: 80px;
z-index: 4;
border-bottom: 1px solid #eee;
}
/***********************************************
Search menu style
************************************************/
.search-trigger {
position: absolute;
right:0.5em;
top: 30px;
width: 40px;
text-align: center;
cursor:pointer;
cursor:hand;
display:inline-block;
}
#media screen and (min-width: 40em) {
.search-trigger {
right: 0.8em;
}
}
#media screen and (min-width:783px){
.search-trigger{
top:26px;
}
}
.search-trigger:before {
width: 100%;
display: block;
font-family: "ElegantIcons";
font-weight: normal;
text-align: center;
content: "\55";
/***********************************************
Icon Style
************************************************/
.tablet-icon{
position: absolute;
display:inline-block;
left:90%;
top: 23px;
width: 40px;
float:right;
}
.tablet-icon:before{
width: 100%;
font-size:1.6em;
font-family: "ElegantIcons";
font-weight: bold;
text-align: center;
content: "\61";
}
<header id="masthead" class="site-header" role="banner">
<span class="tablet-icon"></span>
<a id="search-trigger" class="search-trigger"></a>
</header>
That happens when you use position:fixed, position:absolut, and z-index. You have to change this in your media queries for each resolution.
When I have resizing issues I replace as many px sizings as I can with %. That way when the screen resizes, the elements resize proportionately. i.e. Change out things at 50px with 5%
Well i make the positions on my elements INSIDE the "" element to relative and float:right; and left my position of<header>to absolute,and it worked like a magic.
So I'm trying to recreate the following layout for a lab: http://i.imgur.com/T24vvGu.jpg
I've started by tackling the navigation bar. I set the position to absolute so I can give it a top: 50px; property to move it down 50px from the top.
I tried to then set the logo's position to relative, so that relative to the navigation bar, I can move it 20px from the left or so. But when I use relative positioning, the logo sits inside of the navigation bar and makes the navigation bar's height bigger.
I thought that by setting the logo's position to relative, it would treat the logo as if it's not a part of the navigation bar. However, that's not the case. So what I did was I also set the logo's position to absolute. This entire thing is just killing my soul. For some reason I can't wrap my head around how to do this.
I went to web archive, and looked up spigot design's website. What they did, was they set the navigation bar's position to fixed, and the logo to relative. I tried doing this as well but the logo would still sit inside the navigation bar and extend it's height.
Furthermore, I have to set the logo to sit in the middle of the navigation bar when the browser is 768px and below. And then, two menu links sit to the left of the logo, and the other two menu links sit to the right of the logo. I'm completely lost at how to do this. I don't think I'd have a problem with the rest of the layout. It's just this navigation bar and logo positioning that's driving me insane.
Here is my code: http://cryptb.in/v48Y#cf572c29a798b3c6593631d831c8a323
Should I upload my code with the logo images as well? That may make it easier to follow. I'm not sure what the best practice is as I'm new to stack overflow.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Lab Eight</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- navigation bar left -->
<div class="navbar">
<div id="logo"></div>
<div class="container">
<ul class="float-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="column-twelve">
</div>
<div class="column-twelve">
</div>
</div>
</div>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.1;
}
/* Horizontal line to divide content */
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #332929;
}
#logo {
background: url('images/logo-left.png');
display: block;
width: 250px;
height: 100px;
position: absolute;
left: 15px;
top: -20px;
}
.column-twelve h1, h2, h3, h4, h5, h6 {
color: #f2f2f2;
}
.column-twelve h2 {
font-size: 1.875em;
}
.row .column-twelve p {
color: #f2f2f2;
font-weight: 400;
font-size: 0.875em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Acts as a container to wrap all the content so it doesn't take up 100% of the page. */
.container {
width: 90%;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.navbar {
position: absolute;
width: 100%;
min-height: 58px;
top: 50px;
background: #fefefe;
}
.navbar li {
position: relative;
display: inline;
list-style: none;
}
.navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
padding: 10px 10px;
text-transform: uppercase;
}
/* The row for the columns. */
.row {
margin-right: -15px;
margin-left: -15px;
}
.column-twelve {
width: 100%;
}
.column-eleven {
width: 91.66666667%;
}
.column-ten {
width: 83.33333333%;
}
.column-nine {
width: 75%;
}
.column-eight {
width: 66.66666667%;
}
.column-seven {
width: 58.33333333%;
}
.column-six {
width: 50%;
}
.column-five {
width: 41.66666667%;
}
.column-four {
width: 33.33333333%;
}
.column-three {
width: 25%;
}
.column-two {
width: 16.66666667%;
}
.column-one {
width: 8.33333333%;
}
#media screen and (max-width: 768px) {
#logo {
position: absolute;
margin: 0 auto;
background: url('images/logo-center.png');
height: 146px;
width: 250px;
}
}
Here you go: http://codepen.io/n3ptun3/pen/avrXaE?editors=110
To complete this, I positioned the #navbar relative to its normal position. Then I absolutely positioned the #logo and #container (from their first positioned ancestor element, i.e. #navbar.)
The height issue comes from setting min-height: 58px; on .navbar. Instead, you want to use height: 58px;.
FYI--when using media queries, it is best practice to write your code mobile first. This means writing your code for the smallest screen first. In order to do this, you must use min-width instead of max-width. Also, you want to use #media only screen, instead of #media screen. This targets only browsers that can understand media queries.
Hope this helps. Feel free to ask any questions about the code in the comments section.
HTML
<div id="page">
<div id="navbar">
<div id="logo"></div>
<ul id="container">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
#page {
height: 600px;
}
#navbar {
position: relative;
width: 100%;
height: 50px;
top: 75px;
background-color: #fefefe;
}
#logo {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: #333;
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%);
}
#container {
position: absolute;
top: 13px;
padding: 0;
margin: 0;
width: 100%;
}
#navbar li {
display: none;
}
#navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
position: relative;
left: 100%;
}
#media only screen and (min-width: 569px) {
#navbar li {
display: inline-block;
list-style: none;
width: 20%;
float: left;
text-align: center;
}
}
#media only screen and (min-width: 769px) {
#logo {
left: 50px;
transform: translate(0);
}
#container {
width: 30%;
right: 50px;
}
#navbar li {
width: 25%;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
left: 0;
}
}
EDIT:
In response to your additional questions:
:nth-child() is a pseudo-class selector. It selects the child that is the desired ordinal (i.e. 1st, 2nd, 3rd, 4th, 5th, etc.) of its parent. The ordinal is designated by the number in parentheses. So if you look at my code, you'll see li:nth-child(3). This means: select all li elements that are the 3rd child of their parent. If the 3rd child isn't an li element, it will NOT be selected.
In regards to your media query question: The reason I placed the left: 50%; transform: translate(-50%); code outside of the media query, is because I'm using the mobile first method of coding. Mobile First design is the current standard for responsive design. It means that you are designing for the smallest screen (mobile) first. So, I am centering the logo, and removing the text links, outside of the media query. Then I target the tablet in my first media query: #media only screen and (min-width: 569px). This targets screens that have a resolution of 569px or higher, and adds the text links in the nav bar. Finally, I use another media query: #media only screen and (min-width: 769px) to target larger screens (computers), with a screen size of 769px or higher. In this media query, I position the logo on the left and the text links on the right.
NOTE: In your code, you are using desktop first design. You are designing for the large screen first. Then you use media queries for smaller sizes. That's why your media query uses max-width. I'm using mobile first design. I am designing for the small screen first. Then I use media queries for larger sizes. That's why my media query uses min-width.
Hope this helps!
I want to place some text over a banner on my homepage. The banner changes it's size dynamically, when I scale it in Developer-Mode. Hower I can't mange to kepp the position of the text relative to the banner and change the font-size according to the scaling factor. I tried with font-size vh, vw, % etc.
Here is the sample on jsfiddle:
https://jsfiddle.net/malptek/2o3a81vp/2/
My html-code:
<div class="header-container clearfix">
<!-- <div class="helper-box"></div> -->
<h1 class="header-post-title-banner header-subimage">This is a title</h1>
<img src="http://mesut.alptekin.de/wp-content/uploads/tmpbanner.jpg" class="header-image">
</div>
And css:
.header-container {
margin-bottom: 0;
font-size: 16px;
z-index: 1;
/* border-bottom: 1px solid #EAEAEA; */
position: relative;
width: 100%;
}
.helper-box {
z-index: 2;
position: absolute;
margin-left: 8%;
background-color: #ababab;
margin-bottom: 0;
width: 260px;
height: 20%;
}
.header-subimage {
z-index: 2;
font-size: 16px;
position: absolute;
margin-left: 8%;
margin-bottom: 0;
/* background-color: #fff;
opacity: .5; */
width: 20%;
height: 20%;
/* width: 8em;
height: 1.67em; */
}
.header-image {
z-index: 1;
margin-bottom: 0;
/* border-bottom: 1px solid #EAEAEA; */
width: 100%;
position: relative;
}
.header-post-title-banner {
/* font-size: 3vh;
font-size: 2vw; */
font-size: 150%;
text-align: center;
color: #1b6dba;
font-weight: bold;
padding-bottom: 0;
}
#media screen and (min-width: 1285px) {
.header-post-title-banner {
font-size: 1.8em;
text-align: center;
color: #1b6dba;
font-weight: bold;
padding-bottom: 0;
}
}
==================================
UPDATE:
well, this example is working because viewport is the same size as the banner. but you can imagine the banner being inside another big with 1400px wide (see new example: jsfiddle.net/malptek/2o3a81vp/7). However, in this example the image is somehow not scaling according to the new (don't know why).
Works for me with vw.
https://jsfiddle.net/abalter/2o3a81vp/3/
CSS length measurements vw, vh, and vmin are starting to be widely supported.
http://caniuse.com/#feat=viewport-units
I'm kind of confused by how to interpret the global browser use percentages, but, unless you are concerned about compatibility with older browsers, you can use them pretty freely.
CSS: Are view height (vh) and view width (vw) units widely supported?