I'm making a site and I'd like it to scale properly on all devices.
On my 1080x1920 screen, it works perfectly, but on thinner devices the page does not look very good.
The white space is where the header text should be.
My code can be found here:
.header {
height: 80px;
background-color:#00117D;
background-size:100%;
color:#FFF;
font-size:30px;
font-weight:bold;
line-height: 80px;
padding: 0 30px;
border-bottom-style:solid;
border-width: 2px;
border-color:#FFF;
font-family:"Segoe UI";
}
.header p, .header a {
float: left;
margin: 0;
margin-left:30px;
color:#FFF;
text-decoration:none;
}
https://github.com/MooneyDev/project-Mooney
What I have done in previous projects it used em font size values on all properties but the body, and then used media queries at various stages to change the px based body value as required. This should catch all other values and keep them proportionate.
I would suggest you look into using bootstrap as it should really speed things up and take away a lot of the pain involved in responsive dev.
Related
I can't figure out why my page div has different spaces on Firefox and Chrome (and Edge). Also, when I open it on localhost, it is even more moved, so I have to move my div more than what I see on localhost.
that part is in a div called "press2" and it looks like this
.press2 {
margin-left:220px;
position:absolute;
top:1000px;
width:580px;
}
The "top" part is what I have had to edit. When I look at the page on localhost (Wampserver) it is still about 100px further away, and overlaps with the review div above it
.review {
margin-left:270px;
position:absolute;
top:550px;
width:400px;
}
Can anyone help me figure this out?
Just use line-height in body
body{
font-family: Arial;
font-size: 10pt;
text-align: left;
line-height: 12pt;
}
I'm trying to put an image (a hat) above the letter "u" in the word "blablablau".
The result I expect is that:
I solved this with this code:
<img id="img-hat" src="hat.png">
<p id="title-bla">blablablau</p>
#img-hat {
transform: rotate(25deg);
position: absolute;
margin-left: 118px;
height: 23px;
width: 37px
}
#title-bla {
margin-bottom: -5px;
font-weight: bold;
font-size: 170%;
margin-top: 2px;
font-family: 'Open Sans',sans-serif
}
The problem is that, using the SAME browser (like chrome) in different devices, I get different margin-left results in my img-hat.
Example: in my computer it shows correctly. In my laptop it shows correctly too. But, in another laptop (with same screen resolution), it shows the hat a little bit more to the right, like that:
And this behaviour continues in my cellphone and in another computer that I tested.
Why this happens and how can I solve this?
I'd prefer not to have the image in the HTML at all...it's styling so it should be in the CSS.
So, I use a span to wrap the letter to receive the hat, give it a class and apply the image as a background to a positioned pseudo-element.
By sizing everything in em the hat size will be dynamic to the text size.
.title-bla {
font-size: 24px;
margin: 0;
}
.large {
font-size: 72px;
}
.hat {
position: relative;
}
.hat:after {
content: '';
position: absolute;
top: 0;
left: 0;
margin-top: -.25em;
width: 1em;
height: 1em;
background-image: url(http://b.dryicons.com/images/icon_sets/christmas_surprise_four_in_one/png/128x128/santa_hat.png);
background-size: cover;
transform:rotate(15deg);
}
<p class="title-bla">blablabla<span class="hat">u</span>
</p>
<p class="title-bla large">blablabla<span class="hat">u</span>
</p>
Then you can adjust either the margins or the positioning values to nudge it into place to suit...even rotate it to a jaunty angle. :)
First, you want to absolutely position from right, not left, because your letters may not be exactly the same in different devices. Even with a web font, the displays vary slightly for each browser with letters.
Second, if you want it very exact then you need font-size and line-height in px or rems. 170% may be slightly different depending on the default font size for various devices. Additionally, sometimes mobile devices adjust font size on short or long paragraphs.
This Fiddle should help: https://jsfiddle.net/cjc5myde/1/
#title-bla {
position:relative; top:-2px;
display:inline-block;
margin-bottom: -5px;
font-weight: bold;
font-family: 'Open Sans',sans-serif;
font-size: 28px; line-height:38px;
}
#img-hat {
transform: rotate(25deg);
position: absolute;
top:0; right:-25px;
height: 23px;
width: 37px
}
To avoid this kind of issue I truly recommend you to use a CSS reset like normalize.css which will make browsers render all elements more consistently.
One way to get the result that you want is trying something like this:
<h1 class="title">Blumenau <i class="hat"></i></h1>
Use your icon/image with position: absolute within a parent element with position: relative so you can control more precisely where your icon should appear. You can change the icon position by change his top/right or bottom/left declarations.
/* Just to put away from the border to this example */
body {
padding: 100px;
font-family: sans-serif;
}
/*
To avoid that margin and padding to be consider on the width and height set
*/
* { box-sizing: border-box; }
/*
Parent
*/
.title {
display: inline-block;
position: relative;
font-size: 32px;
}
/*
Icon/image
*/
.hat{
background: url('http://s23.postimg.org/os0nl4rrr/rsz_hat.png');
transform:rotate(15deg);
top: -2px;
right: -9px;
width: 35px;
height: 19px;
}
/**
* Icon/image position
*/
.title i {
display: inline-block;
position: absolute;
}
See it in action on JSFiddle.
If you put the img tag inside the p tag, it will automatically be placed at the end of the text. From there, you can just position the hat relative to its original position. You're probably going to need to tweak the left value a little.
<p id="title-bla">blablablau<img id="img-hat" src="hat.png"></p>
#img-hat {
transform: rotate(25deg);
position: relative;
left: -20px;
height: 23px;
width: 37px
}
Different machines have different resolutions so their response in how they handle images and text with are displayed differently. This is as expected. Basically a browser will attempt to readjust the website to fit the viewing device.
That being said have you tried adding a z-index to your img-hat. I personally do not use z-index often but in situations like this it could be helpful. Another option have you tried relative positioning?
Different browsers have different default padding and margins that they resort to when our styles aren't applied. Sometimes, it's best if you drop all of that to 0.
Start your css file with
body {
margin:0;
padding:0
}
Check if it works
I created a few circles using CSS that I use as text inputs on my HTML index page.
Problem is that when the font inside is relatively large compare to the CSS circle, the circle turns into an oval.
It only happens on IOS. I have tested the page on Safari and Chrome and it's perfectly fine. Don't have android devices to test.
I have tried using meta flags and webkit properties but no go.
Any hints?
input[type=text5]{
position: absolute;
left: 270px;
top: 340px;
display:block;
width:50px;
height:50px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
margin:0 auto;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-family:Verdana;
font-size:16px;
font-weight:bold;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
Large Font:
Small Font
well guys, I figured out after playing a bit with CSS properties. For some reason iOS was adding padding to the text. Interesting that none of the desktop browsers added padding. In any case adding: padding: 0px; solved it.
One More Way...
If you apply CSS3 Property box-sizing:border-box; on element being oval in iOS, the problem will be solved.
I want to evenly align the two images on either side of the h2 for a responsive design and allow the images to scale down when the browser is reduced, eventually disappearing in small windows such as on mobile devises. Would like to know what I am doing wrong.
JsFiddle
the h2 needs to have float: left; as well
You also need to create a css sheet that calls for the actions based on the screen size (in pixels)
see link:
jsfiddle
All you need then is to use float left
#tag-container h2.tag {
font-family: 'Droid Serif', serif;
font-size: 52px;
font-style: italic;
color: #34291c;
letter-spacing: 1px;
text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
text-align: center;
margin: 0;
**float: left;**
}
I am using a custom font (Oswald) for the headings or titles within my page. I believe that its' height is conflicting with the native fonts (Arial, san-serif etc.) and would like to know if there is a way to set both fonts evenly...? If more text is placed in later on, the gap difference becomes substantial.
Please take a look at what I have here: http://jsfiddle.net/x6v7F/
I have a temporary background fade in and out to illustrate.
thank you.
It doesn't seem to be a font-size issue, the issue seemed to be with you specifying the line-height
If you see this fiddle, you can see I've changed h1 and h2 to have these line-heights
h1 {
font: 16px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#000000;
margin:14px 0;
line-height: 100%; <----
}
h2 {
font: 12px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#BBBBBB;
margin-bottom: 14px;
line-height: 100%; <----
letter-spacing: .2px;
}
If you check that Fiddle, it seems to have fixed your problem?
Rob has 4 sections that sit side by side (you may have to bump up width of jsfiddle window). His prob is that he wants his sections to line up along the bottom, but is having issue because the varying text sizes between his body font and header fonts.
Many of the css grid frameworks try to address these type of issues: normalizing the heights of text and headers so that all lines fall on an imaginary grid of baselines.
To be honest, I would just give the sections a static height and leave some fuzzy space at the bottom for margin of error.
section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }
Edit:
If you're looking for a dynamic section height, you'll have to leverage javascript magic. JQuery:
<style>
section { position:relative; padding-bottom:50px; }
section .button { position:absolute; bottom:0; right:0; }
<style>
<script>
var max_height = 0;
$('section').each(function() {
max_height = Math.max(max_height, $(this).height());
}).height(max_height);
</script>