My desired outcome is a headline element with a thick underline that is slightly offset from the left like so:
I'm getting the underline to work with an inset CSS box-shadow, but I have no idea on how to offset it from the left so that it's not completely inline with the start of the h2 text.
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
}
h2 span {
box-shadow: inset 0 -1.0rem 0 0 #88DEB2;
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>
Happy for any hints on how to achieve this.
You are almost good, simply add a negative text-indent:
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
padding-left: 1rem;
}
h2 span {
box-shadow: inset 0 -1.0rem 0 0 #88DEB2;
display:inline-block; /* this is needed for the trick */
text-indent: -1rem; /* here */
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>
A multiline solution with gradient
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
padding-left: 1rem;
}
h2 span {
background:
linear-gradient(#88DEB2,#88DEB2)
bottom right/calc(100% - 1rem) 1rem
no-repeat;
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>
You can make use of the pseudo element ::after or ::before and control the offset/positioning using left or right. Code explained in comments.
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
width: max-content; /* Take the content width */
}
h2 span::after {
content: " "; /* Let us 'activate' the pseudo element */
display: block;
background: #88DEB2;
height: 15px;
position: relative;
top: -10px;
left: 5px; /* Control the misalignment */
z-index: -1; /* So that it appears underneath */
}
<h2><span>Incredible Pure Castile Soap</span></h2>
You can use a linear-gradient to fake an underline which should achieve this (see comments in code for details)
html {
font-family: 'Roboto', sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-family: serif;
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
}
h2 span {
background-image: linear-gradient(transparent 50%, #88DEB2 50%); /* makes a linear gradient */
background-position: 5px 0; /* offsets it */
background-repeat: no-repeat; /* stops it from repeating */
padding-right: 5px; /* gives more space for the underline offset */
}
<h2><span>Incredible Pure Castile Soap</span></h2>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am not sure why my media queries are not working on the mobile phone. When I slide the desktop version to be narrow like a mobile phone, the smaller tablet and mobile views seem to work. But they do not work on an actual device. Is something wrong my my code?
Site here: http://jenniferblatzdesign.com/.
#import url('http://fonts.googleapis.com/css?family=Gabriela');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bottom: 30px;
}
html { overflow-y: scroll; }
body {
background: #fcfcfc url('bg.png'); /* http://subtlepatterns.com/crossword/ */
font-size: 62.5%;
line-height: 1;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 45px 25px;
padding-bottom: 100px;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 94%;
background: #0068ac;
font-size: 1.5 em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 800px;
height: 40px;
}
nav li {
display: block;
float: left;
width: 20%;
text-align: center;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #89a8bc;
}
nav a#pull {
display: none;
}
#header {
text-align: center;
}
#header h1 {
display: none;
}
#header h2 {
width: 70%;
margin-top: 30px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.3em;
line-height: 1.9em;
text-align: center;
font-weight: 200;
}
#header img {
width: 50%;
margin-bottom: 40px;
margin-top: 30px;
}
#footer p {
margin-top: 10px;
font-size: 1.1em;
font-weight: 200;
line-height: 1.5em;
text-align: center;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#content #footer p a {
color: #005496;
}
#footer ul li a {
color: #005496;
}
#footer ul li {
display: inline;
padding-top: 20px;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
#about h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
}
#praise h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.7em;
}
#about p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
font-size: 1.6em;
line-height: 1.7em;
}
#about p a {
color: #005496;
}
#praise p {
width: 70%;
padding-left: 25px;
color: #474646;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-weight: 300;
font-size: 1.7em;
line-height: 1.4em;
margin-top: 10px;
margin-bottom: 20px;
}
#praise h5 {
padding-left: 40px;
color: #4C3B5F;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.8em;
}
#praise h6 {
padding-left: 56px;
color: #474646;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-weight: 300;
font-size: 1.2em;
line-height: 2em;
}
#praise hr {
height: 1px;
margin-top: 30px;
margin-bottom: 30x;
color: #7B7979;
}
#about {
width: 70%;
}
#contact h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
margin-top: 40px;
}
#header p {
color: #4C3B5F;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.3em;
line-height: 1.5em;
margin-top: -30px;
font-weight: 500;
}
#contact p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
font-size: 1.6em;
line-height: 1.7em;
}
#contact p a {
color: #005496;
}
#social h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
margin-top: 40px;
}
#social h2 img {
margin-top: 10px;
margin-right: 10px;
}
#social {
width: 90%;
}
#linkedin h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#twitter h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#behance h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#facebook h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#pinterest h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
width: 94%;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 20%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: center;
width: 100%;
text-indent: 5px;
}
#header img {
width: 90%;
margin-bottom: 40px;
margin-top: 30px;
}
#header h2 {
width: 80%;
margin-top: 30px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
font-size: 1.7em;
line-height: 1.7em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
text-align: center;
width: 94%;
}
nav li {
width: 100%;
float: left;
position: relative;
text-align: center;
}
nav a#pull {
display: block;
background-color: #ece8e5;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
#header img {
width: 100%;
margin-bottom: 30px;
margin-top: 30px;
}
#praise p {
width:95%;
}
#about {
width: 100%;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
text-align: center;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.2em;
line-height: 1.6em;
text-align: center;
text-decoration: none;
}
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
strong, b { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif}
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 {
font-family: 'Gabriela', Tahoma, sans-serif;
font-size: 3.7em;
font-weight: 700;
line-height: 1.55em;
margin-bottom: 18px;
text-align: center;
color: #514b53;
letter-spacing: -0.06em;
text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
}
/** page structure **/
#wrapper {
display: block;
max-width: 1100px;
margin: 0 auto;
}
#portfolio {
display: block;
}
#portfolio li {
display: block;
float: left;
width: 30%;
max-width: 400px;
margin-right: 20px;
margin-bottom: 20px;
}
#portfolio li a {
display: block;
padding: 8px;
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}
.mfp-title {
font-size: 1.2em;
color: #ddd !important;
font-weight: 700;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/** media queries **/
#media screen and (max-width: 780px) {
#portfolio li {
width: 45%;
}
}
#media screen and (max-width: 550px) {
#portfolio {
text-align: center;
}
#portfolio li {
float: none;
display: inline-block;
width: 80%;
margin-bottom: 30px;
}
}
Most likely has to do with your Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am using below CSS for my button
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width: 50px;
}
Here if you will check ,i am using width: 50px; but i want the width of button shuold be flexible it should change width according to text size if button text is Submit then button width will small but if text is something like this Post Your Question now button width should change.
How can we achieve this with css ?
If you are using a div then you need to set it to display:inline-block then you do not need to set a width.
DEMO http://jsfiddle.net/kevinPHPkevin/kw3La/
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
padding: 10px;
display:inline-block;
width: auto !important;
}
Do it like this: demo
CSS:
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
padding:2px 6px;
}
html:
<button class="ui-button-text">Submit</button>
<button class="ui-button-text">Post your question</button>
However if you're talking about overriding the css that is coming from .ui-button-text, then do as here : http://jsfiddle.net/bcqPG/1/
CSS:
.ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width:50px;
}
button.ui-button-text{
width:auto;
padding:2px 6px;
}
I can't get a top margin to show in safari. CSS works fine and the #divcontainer has a top margin and is centered in firefox and other browsers but not in safari.
I would like a 10px space to show above the container which will hold all other content.
Here is the CSS:
/* CSS Document */
body {
color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground to white*/
margin: 100px auto; /*This sets the margin to zero*/
padding:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
.redtext {
color: #FF0000;
}
a {
color: #009900;
}
a:link {
color: #000099;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
.menu a:visited {
color: #666666;
text-decoration: none;
}
.menu a:hover {
color: #990000;
text-decoration: none;
}
.menu a:active {
color: #666666;
text-decoration: none;
}
div#container {
width: 960px;
height:760;
overflow:auto;
/*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
div#outer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#header {
position:relative;
text-align: center;
width: auto;
}
div#nav {
width: auto;
padding: 10px;
margin-top: 1px;
position:relative;
}
div#main {
position:relative;
width: auto;
}
div#footer {
position:relative;
width:auto;
padding: 15px;
margin: 0px;
}#nav {
position: relative;
padding:20px;
width: auto;
}
You'll probably want to set the margin: 10px auto; on the #container. Usually, I do this:
body {
text-align: center;
padding: 0;
margin: 0;
}
#container {
width: 960px;
height: 760px;
text-align: left;
margin: 10px auto;
}
...assuming the #container div is the first element, that should work out.
You may also want to try out one of the css reset files out there.