I have the problem that my text is not responsive, i tried to delete the text, the image is responsive, just the text is not..there is a white border.
i dont know how to fix that problem, it hink there is something with my css code, but i dont know what.
#stage {
background: url('../img/ozadje.jpg') center center no-repeat;
background-size: cover;
position:absolute;
color: white;
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
#stage-caption{
font-size: 1.4rem;
font-weight: 200;
max-width: 80rem;
margin: 0 auto;
}
#stage-caption h1{
font-size: 3.5rem;
color:silver;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
text-transform: uppercase;
line-height: 150%;
}
#stage-caption p{
color:silver ;
font-size: 2.5rem;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
<div id="stage">
<div id="stage-caption">
<h1 class="display-3">
THERE'S ONLY ONE MIHAEL SOBOČAN, WEB DESIGNER & PROGRAMMER!
</h1></div>
</div>
screenshot of the problem
http://i.stack.imgur.com/FBKyO.png
Well to be honest, it only starts happening once you get down to really small screen sizes.. so it may not be worth even worrying baout really.
BUt the problem is that the word 'PROGRAMMER' is too long to get any shorter, and pushes the width of the viewport out further.
So your solution, if you really are worried about it, is to reduce the font size with a media query under 768px.
#media (max-width:768px) {
#stage-caption h1 {font-size:1em;}
}
Related
I am working on a design where I would like to have the background of text be as a block of text specific to the word themselves (As per example 1). When I decrease the leading. That is, make the line-height tighter and closer together it runs into issues and crops the letters above it.
Searching for a better approach so that I can have tight leading and a maintain the nice block background.
.example1 {line-height: 1.4}
.example2 {line-height: 1.1}
.box { margin: 0 0 50px 0; padding: 0; font-family: helvetica, arial; font-weight:bold; font-size: 40px; width: 550px; }
.box > span { background-color: #060055; color: #ffffff; box-shadow: -10px 0px 0 10px #060055, 10px 0px 0 10px #060055, 0 0 0 10px #060055; box-decoration-break: clone; }
<div class="box example1"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
<div class="box example2"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
You need to add style display: inline-block; on span element.
Wrap your text in another <span> and give it position: relative;.
Edit: Yudiz_Webdesign's solution is better, but I'll leave this here as an alternative.
.example1 {line-height: 1.4}
.example2 {line-height: 1.1}
.box { margin: 0 0 50px 0; padding: 0; font-family: helvetica, arial; font-weight:bold; font-size: 40px; width: 550px; }
.box > span { background-color: #060055; color: #ffffff; box-shadow: -10px 0px 0 10px #060055, 10px 0px 0 10px #060055, 0 0 0 10px #060055; box-decoration-break: clone; }
.box span.inner { position: relative; }
<div class="box example1"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
<div class="box example2"><span class="outer"><span class="inner">Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></span></div>
Im using a div to have a gradient background on a tittle on my weppage.
When using "border" property in CSS the text get pushed out of the div.
I have tried to changue size, take out radius-border etc...
#TextKeyboard {
height: 26px;
width: 330px;
text-transform: uppercase;
text-align: left;
background: -webkit-linear-gradient(#615bff, #262544);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#615bff, #262544);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#615bff, #262544);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#615bff, #262544);
margin-top: 20px;
margin-left: 20px;
padding-left: 10px;
border-radius: 12px;
border: 1px solid;
}
h3 {
color: #f6b824;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
http://jsfiddle.net/t5w7wuay/ here a jsfiddle of my code.
Thanks.
There are predefined styling on some elements, like h3.
To fix your button add this to yout h3 rule:
margin: 0;
padding: 0;
Edit:
Advice: Use a reset.css like you can find here
it clears every predefined style and gives you the full controll of your styling.
Just add margin:0; to your h3 class:
h3 {
color: #f6b824;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
margin: 0;
}
JSFIDDLE: http://jsfiddle.net/ghorg12110/t5w7wuay/1/
I have got a little problem with a spacing. I want to have spacing less than 1 pixel. Here is my html
<div id="head">
<h1>Mira's</h1>
<br>
<h2>Koding place</h2>
</div>
and here is the CSS
#font-face {
font-family: Museo;
src: url("fonts/Museo300-Regular.otf") format("opentype");
}
body {
background-color: black;
}
h1 {
text-align: center;
margin: 0 auto;
font-family:'Museo', 'Lucida Console', Courier;
font-size: 7em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #029408, 0 0 70px #029408, 0 0 80px #029408, 0 0 100px #029408, 0 0 150px #029408;
}
h2 {
font-size: 1.65em;
text-align: center;
font-family:'Museo', 'Lucida Console', Courier;
color: #fff;
margin-top: -1.65em;
margin-left: 0.13em;
letter-spacing: 0.5px;
}
Problem is that it's not letter spacing less than one px, is there any hack to make it less than one px?
Here is jsfiddle with it http://jsfiddle.net/3np3y/
Also dont mind that some things in CSS are px and some are em. I will retype everything to em soon.
Letter spacing can have negative value, so try that :)
I.E. letter-spacing: -4px;
I have built web site (www.dubovik.org it's on russian, but it's not relevant to the issue) everything looks quite ok except on mobile Safari (on iphone and ipad). Only one h2 (with phone numbers) has blue color instead of white (as other h2's).
This is html with problematic heading:
<h2 class="heading" id="left">694-29-29 <br> 7-911-922-35-97</h2>
And css:
h2 {
clear: both;
color:#444444;
text-align: center;
font-size: 1.2em;
font-family: Helvetica, italic;
}
.heading {
width: 650px;
color: #fff;
text-align: right;
text-transform: uppercase;
text-shadow: 0 3px 5px rgba(0,0,0,0.7);
line-height: 1em;
}
#left {
position: absolute;
top: 335px;
left: 1.5%;
z-index: 5;
float: left;
width: 500px;
color: #fff;
text-align: left;
text-transform: uppercase;
text-shadow: 0 3px 5px rgba(0,0,0,0.7);
font-size: 3.5em;
line-height: 1em;
}
Tried everything (style it differently, give it different classes and id's and style them differently) - mobile Safari renders h2 heading with phone number in blue color.
Thanks for your help!
iOS automatically makes telephone numbers into links. You can stop it from doing that like this:
<meta name="format-detection" content="telephone=no">
Or you can keep the number as a link and style it like this:
a[href^=tel]{
color:inherit;
}
You could try this:
color: #fff !important;
I'm using WordPress and a template I bought in order to build the website I'm having the problem with. The template is built to be responsive and I'm facing some problems that I no matter what I've tried I wasn't able to find a way to fix them.
There are two boxes that when re-sizing the window don't occupy all the available width.
Here's the php code:
<div class="gb_ff social_share bold font_x_small boxed2">
<span class="meta_title_social">
<?php gb_e('Share') ?>
</span>
<?php get_template_part('inc/social-share') ?>
</div>
<div class="gift boxed3">
<span class="gift_image">
<img src="http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/gift.png";?>
</span>
<span class="gift_title">
<?php gb_e('Buy for friend') ?>
</span>
</div>
and here's the CSS
.gb_ff, h1, h2, h3, h4, h5 {
font-family: Arial;
color: #666666;
text-transform: none;
}
.social_share {
width: auto;
float: left;
padding: 9px 0 0 0;
}
.boxed2 {
width: 300px;
height: 65px;
background-color: #f9f9f9;
margin-top: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
background-image: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/blank-child-theme/img/gradient.png);
background-repeat: repeat-x;
background-position: center bottom;
border-bottom: 1px solid #CCC;
border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px #7D7D7D;
}
.gift{
font-size: 0.6em;
font-family: Arial;
float:left;
}
.boxed3 {
width: 297px;
height:65px;
background-color: #f9f9f9;
margin-top: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
background-image: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/blank-child-theme/img/gradient.png);
background-repeat: repeat-x;
background-position: center bottom;
border-bottom: 1px solid #CCC;
border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px #7D7D7D;
}
.gift_image {
float: left;
margin: 16px 9px;
}
.gift_title {
color: #666;
font-size: 15px;
font-family: arial;
font-weight: bold;
margin-left: 3px;
margin-top: 10px;
line-height: 66px;
}
The boxes I'm referring to are the ones that appear under the countdown.
I don't know how your css is organized, but these lines should do it (assuming it's specific enough):
#media all and (max-width: 900px) { /* this media query rule is probably
in the css already. no need to repeat it*/
.boxed2,
.boxed3 {
width: 100%;
}
}
If it's the first time you're seeing/hearing about media queries, then this might be useful: CSS Media Queries & Using Available Space
In your desired media queries CSS set the width of those elements to be width:100% when the resolution is at a certain size.
The media queries are already there - you simply have to add a css rule for these elments in there.
CSS media queries are used to apply certain styles for desired screen/window resolutions.
for example all your media queries i your theme are found in style-media-queries.css file.
Add this to your css
#media (max-width: 900px) {
#boxed2, #boxed3{
width:auto;
float:none;
}
}
You can read more about media queries here