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?
Related
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.
My goal was to stack two forms over each other so the outside borders aligned perfectly. I got it to work and look exactly how I want it to on the desktop site but viewing it on my mobile phone I noticed the "red box" isn't exactly on top of the other one and is slightly higher. (Like no more than 1 or 2px)
If I lower the red box to make it look right on the mobile version than the desktop version gets screwed up.
I've eliminated all margins, and tested various positioning "absolute" in and out of div's to try and eliminate this weird extra space but I still can't figure out what's causing the discrepancy in the mobile version versus the desktop version.
CSS (Included animated transitions) - if you need me to edit the code some more just let me know (sorry I'm still fairly new here)
.wrappercirclenamesearchcats {
top: 10%;
position: relative;
margin: 0 auto;
}
.circlelogo1 {
position: relative;
background: #007580;
margin: 0 auto;
border-radius: 50%;
height: 50px;
width: 50px;
/* Child elements with absolute positioning will be positioned relative to this div */
}
.circlelogo2 {
position: absolute;
background: white;
border-radius: 50%;
height: 32px;
width: 32px;
/* Put top edge and left edge in the center */
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
/* Offset the position correctly with minus half of the width and minus half of the height */
}
.name {
position: relative;
margin: 0 auto;
font-size: 45px;
font-weight: 300;
top: 25px;
height: 40px;
line-height: 40px;
color: #007580;
}
.searchcontainer {
position: relative;
height: 36px;
top: 45px;
margin: 0 auto;
width: 90%;
max-width: 400px;
box-sizing: border-box;
}
input[type=text] {
width: 100%;
border: 1px solid grey;
border-radius: 0;
-webkit-appearance: none;
padding: 8px 40px;
/* 1st size of box 2nd moves words right */
background-image: url('https://image.ibb.co/j9esac/searchicon.png');
background-position: 10px 7px;
/* 1st moves right 2nd moves down */
background-repeat: no-repeat;
font-size: 17px;
box-sizing: border-box;
}
.categories {
margin: 0 auto;
position: relative;
font-weight: 300;
word-spacing: 26px;
top: 66.5px;
#include fluid-type(font-size, 413px, 1200px, 14px, 16px);
}
.categories a {
text-decoration: none;
color: inherit;
}
#media screen and (max-width: 413px) {
.categories {
font-size: 14px;
}
}
#media screen and (min-width: 1200px) {
.categories {
font-size: 16px;
}
}
.formcontainer {
position: absolute;
top: 0;
font-size: 17px;
font-weight: 400;
padding: 10px 0 10px 0;
border: 1px solid red;
width: 100%;
max-width: 400px;
margin: 0 auto;
box-sizing: border-box;
}
input[type=unams] {
width: 70%;
padding: 12px 50px;
margin: 22px 0 0 0;
border: 1px solid grey;
border-radius: 0;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/fZHHnc/signin.png');
background-position: 10px 8px;
/* 1st controls move right 2nd move down */
background-repeat: no-repeat;
background-size: 25px;
/* username icon size */
box-sizing: border-box;
}
input[type=password] {
width: 70%;
padding: 12px 50px;
/* first is how big you want the input box 2nd is positioning of word password */
margin: 22px 0 15px 0;
border: 1px solid grey;
border-radius: 0;
-webkit-appearance: none;
font-size: 17px;
background-image: url('https://image.ibb.co/jC7gfx/lock.png');
background-position: 10px 8px;
/* 1st controls move right 2nd move down */
background-repeat: no-repeat;
background-size: 25px;
/* lock icon size */
box-sizing: border-box;
}
.loginbutton {
background-color: #007580;
border: none;
color: white;
width: 30%;
font-size: 17px;
height: 38px;
margin: 0 auto;
}
<div class="wrappercirclenamesearchcats">
<a href="index2.html">
<div class="circlelogo1">
<div class="circlelogo2">
</div>
</div></a>
<div class="name">Dollar Resources
</div>
<div class="searchcontainer">
<form>
<input name="search" type="text">
</form>
<div class="formcontainer animated slideInRight">
<form>
<input type="unams" class="usr" placeholder="Username" name="uname"
required>
<br>
<input type="password" placeholder="Password" name="psw" required>
<br>
<button class="loginbutton" type="submit">Log In</button>
</form>
</div>
</div>
<div class="categories">
<b>Categories</b> Newest Popular Music Youth
</div>
</div>
The most absolute solution to this problem would be the use of media queries. Check here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Media queries will help you design and tailor your website to work on all sizes you specify.
If media queries don't work for you, then another method would be making your bottom form's position relative, adding "overflow-x: hidden;" to your body and animating the margin-left/left of the form. With the position set to relative, rather than fixed or absolute,, it should always remain under the first form (it shouldn't overlay on top of other elements because the position will take into account all the elements surrounding it).
you can use media queries, but i don't recommend you to use absolute positioning due to responsiveness, unless you use responsive measurements (vh, vw, vmin, vmax, em, rem). i would recommend you to use wherever but em and rem, because are font-size based, and vh vw, vmin vmax are related to viewport.
it's not a quick job to set the media queries or the alignment with this measurements so i'll let you the doc to you can do it properly.
Address to w3c:
https://www.w3schools.com/cssref/css_units.asp
Media queries link that #braijon-g posted already:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
if you don't want to use any of these options listed before, you can use javascript or jQuery to reach this job, using (example with jQuery):
function windowSize(){
//get the height of the window
var height = $(window).height();
//get the width of the window
var width = $(window).width();
/* Some calculations to set the items on desired % of the screen, for example: */
//in this case i want this item to have the full screen less 100px of margin
desiredWidth = width - 100;
//adding this calculation to the desired item:
$('.desiredItem').css('width', desiredWidth);
}
//this will call and apply the windowSize function to move elements or whatever
$(document).ready(function(){
windowSize();
});
//if you resize the window, it will call the windowSize function again to recalc the position dynamically
$(window).resize(function{
windowSize();
});
Anyway i would recommend you to run over CSS to reach this, is faster, lighter and more recommendable.
div.e{
position: absolute;
top: 5vh;
left: 25vmin;
}
h1.a{
position: absolute;
left: 20vmin;
}
p.m{
position: absolute;
top: 35vh;
left: 30vmax;
}
p.l, p.e{
position: absolute;
min-width: 50vmax;
top: 25vmin;
left: 30vmax;
}
p.e{
top: 20vmin;
}
<div class="e">
<div class="x">
<h1 class="a"> Lorem ipsum dolor sit amet </h1>
<p class="m"> text text text text</p>
</div>
<div class="p">
<p class="l"> text2 text2 text2 text2 </p>
<p class="e"> text3 text3 text3 </p>
</div>
</div>
Example using absolute position with responsive measurements.
It's only to show you how different responsive measurements can work.
If you open it at full screen it will fit different than in the little screen, this is due to the use of different type of measurements.
You can use vh and vw for being more exact, or use vmin and vmax, but not blend it on a real project because the difference on their calcs.
I have some text inside a parallelogram, the problem is that when I resize the window the text loses all its properties, I have tried vw, vh, em, pt, rem and px
Also I have tried with #media screen and (min-width: 320px;)
But nothings seems to work, currently this is what I have so far, I hope you could help me.
.paralelo {
margin-top: 8%;
margin-left: 0%;
padding-left: 0;
text-align: right;
width: 48%;
height: 50%;
max-height: 10px;
border-top: 50px solid #c5027f;
border-right: 30px solid #FFf;
}
.who {
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 3em;
font-weight: 400;
color: white;
margin-top: -21.5%;
margin-right: 12px;
}
<div class="paralelo">
<p class="who">Servicios</p>
</div>
Try with using position like:
.paralelo {
position: relative; /* -- add this line */
margin-top: 8%;
margin-left: 0%;
padding-left: 0;
text-align: right;
width: 48%;
height: 50%;
max-height: 10px;
border-top: 50px solid #c5027f;
border-right: 30px solid #FFf;
}
.who {
position: absolute; /* -- add this line */
top: -100px; /* -- add this line */
right: 12px; /* -- add this line */
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 3em;
font-weight: 400;
color: white;
/* margin-top: -21.5%; -- remove this line */
/* margin-right: 12px; -- remove this line */
}
<div class="paralelo">
<p class="who">Servicios</p>
</div>
here is jsfiddle so you can resize screen
read more about how to use position here
Update after comment
Here is the example with vw so if you resize the screen it will change all sizes accordingly https://jsfiddle.net/5x7p6fsr/1/
I have a site I'm working on where I have some text that needs to view close to the same size on all browsers. I'm using 1.6em as the font size in the pics below. The problem is that in IE 11 the font appears way larger than in it does in Chrome/FF/Safari. I have tried every font sizing option I can think of, such as; px,vh,vw,vmin,% but, all still render larger in IE 11 than all other browsers. Does anyone know a good work-around for this?
Not sure if it makes a difference but I am using a google font instead of a regular font.
Sample in Chrome (this is how it should look)
Sample in IE 11
My HTML:
<div class="banner-wrap">
<div>
<h1>Where Compassion Lives</h1>
</div>
<img class="banner" src="assets/images/banner_title_home.png">
<img class="greg" src="assets/images/greg-transparent.png">
</div>
MY CSS:
.banner-wrap {
position: relative;
width: 100%;
max-width: 796px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.banner-wrap div {
font-size: 1.6em;
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 40;
font-family: 'Kaushan Script', cursive;
color: #FFF;
letter-spacing: 0.2em;
opacity: 0.9;
text-align: center;
text-shadow: 1px 1px 1px #999;
}
.banner-wrap img.banner {
position: absolute;
bottom: 59px;
left: 0px;
width: 100%;
height: auto;
z-index: 30;
}
.banner-wrap img.greg {
position: absolute;
bottom: 30px;
right: -50px;
width: 19vmin;
max-width:180px;
height: auto;
z-index: 40;
}
Nevermind...figured it out. since I was assigning the font-size using the selector div the user-agent style for the h1 tag was overriding my div font-size style. Changed my font-size style to use the h1 selector and all is good.
I am designing a responsive website for a client where the image needs to be resized according to the width of screen.
I set the image to max-width:100% and height:auto and it's working perfectly in chrome but not in mozilla.
Here is the link http://touchtalent.cloudvent.net/
Also, there is a similar question at
Image mysteriously ignoring max-width in Firefox & IE
And, according to it's answer, I tried to give it's parent a width of 100%, but that doesn't help.
Here is my HTML code
<div id="wrapper">
<header>
<section class="banner1">
<img class="banner" src="img/banner1.jpg" alt="banner1"/>
<div class="tag1">
BECAUSE YOU HAVE
</div>
</section>
<section class="banner2">
<img class="banner" src="img/banner2.jpg" alt="banner2"/>
</section>
<section class="banner3">
<img class="banner" src="img/banner3.jpg" alt="banner3"/>
<div class="tag2">
A
</div>
<div class="tag3">
CREATIVE GENIUS
</div>
<div class="tag4">
INSIDE YOU
</div>
<div class="tag5">
<div class="btn_join">
JOIN US
</div>
</div>
</section>
</header>
</div><!--wrapper-->
Here is its CSS
* {
float: left;
}
header {
max-width: 100%;
}
img.banner {
max-width: 100%;
height: auto;
display: block;
}
.banner1, .banner2, .banner3 {
max-width: 100%;
position: relative;
}
.tag1, .tag2, .tag4, .tag3, .tag5 {
width: 100%;
font-family: "HeroLight", sans-serif;
font-size: 40px;
color: #FFF;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
height: 40px;
}
.tag2 {
top: 20px;
}
.tag4 {
top: 160px;
}
.tag3 {
top: 70px;
font-family: "sixties", sans-serif;
font-size: 80px;
}
.tag5 {
bottom: 60px;
}
.tag5 .btn_join {
background: #FFF;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
color: #000;
font-size: 23px;
font-family: "HeroLight", sans-serif;
width: 198px;
height: 53px;
line-height: 60px;
position: relative;
left: 50%;
margin-left: -99px;
cursor: pointer;
}
#media screen and (min-width: 500px) and (max-width: 1200px) {
.tag1, .tag2, .tag4, .tag3, .tag5 {
width: 100%;
font-family: "HeroLight", sans-serif;
font-size: 25px;
color: #FFF;
position: absolute;
text-align: center;
left: 0px;
bottom: 0px;
height: 40px;
}
.tag2 {
top: 15px;
}
.tag4 {
top: 100px;
}
.tag3 {
top: 45px;
font-family: "sixties", sans-serif;
font-size: 50px;
}
.tag5 {
bottom: 25px;
}
.tag5 .btn_join {
background: #FFF;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
color: #000;
font-size: 23px;
font-family: "HeroLight", sans-serif;
width: 198px;
height: 53px;
line-height: 60px;
position: relative;
left: 50%;
margin-left: -99px;
cursor: pointer;
}
}
#media screen and (min-width: 1201px) and (max-width: 1400px) {
.tag1, .tag2, .tag4, .tag3, .tag5 {
width: 100%;
font-family: "HeroLight", sans-serif;
font-size: 35px;
color: #FFF;
position: absolute;
text-align: center;
left: 0px;
bottom: 15px;
height: 40px;
}
.tag2 {
top: 15px;
}
.tag4 {
top: 125px;
}
.tag3 {
top: 55px;
font-family: "sixties", sans-serif;
font-size: 60px;
}
.tag5 {
bottom: 25px;
}
.tag5 .btn_join {
background: #FFF;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
color: #000;
font-size: 23px;
font-family: "HeroLight", sans-serif;
width: 198px;
height: 53px;
line-height: 60px;
position: relative;
left: 50%;
margin-left: -99px;
cursor: pointer;
}
}
#wrapper {
width: 100%;
min-width: 1000px;
overflow: hidden;
}
Please help!
You have float:left applied to all elements. Floated blocks occupy as much width, as needed by their content. In this case, image initial width "spreads" on the parent section.
And max-width on replaced block elements (such as images) doesn't make them occupy all the space - it just makes them not to widen more, than soe value. width:100% does
Try removing the float rule and give images width:100%
I had the same problem and after reading this bugzilla report https://bugzilla.mozilla.org/show_bug.cgi?id=975632 I found out that if the image is nested in a table or a {display: table;} property is applied, then the max-width trick doesn't work because the table adapts to its content size.
So I hunted down this property in my DOM via dev tools in Firefox and I found a {display: table;} on one of the very first divs. Some attempt to scale the website ? I'm using currently TikiWiki CMS, an old version (12).
Anyway, correcting the CSS to {display: block;} made the {max-width: 100%} rule now work, and so finally I get the small images keeping their sizes and the big ones resizing to the container width.
As it took me some time to find out, I just thought let's share this if it can avoid others to loose time on this !!!
add this to your css
body, html {margin: 0; padding:0; width: 100%;min-width: 100%;max-width: 100%;}
img.banner {
width: 100%;
min-width: 100%;
max-width: 100%;
height: auto;
display: block;
}
.banner1, .banner2, .banner3 {
width: 100%;
min-width: 100%;
max-width: 100%;
position: relative;
}
also as also mentioned remove the float?
* {float: left;}
This is completly working, however, you set a minimum width on your #wrapper div content.
Remove it from the main.css line 550 and it will work
CSS
#wrapper {
width: 100%;
/* min-width: 1000px; to remove */
overflow: hidden;
}
You must use image width="100%" like ().
It must work for you. Gud Luck
For my issue (and using a bootstrap derivative), I didn't want my images scaled to 100% when they weren't intended to be as large as the container.
For my xs container (<768px as .container), not having a fixed width drove the issue, so I put one back on to it with javascript & jQuery (less the 15px col padding).
// Helps bootstrap 3.0 keep images constrained to container width when width isn't set a fixed value (below 768px), while avoiding all images at 100% width.
// NOTE: proper function relies on there being no inline styling on the element being given a defined width ( '.container' )
function setWidth() {
width_val = $( window ).width();
if( width_val < 768 ) {
$( '.container' ).width( width_val - 30 );
} else {
$( '.container' ).removeAttr( 'style' );
}
}
setWidth();
$( window ).resize( setWidth );
Add this to your css.
body {width: 100%;)
Your elements are displaying as 100% of your parent element. Webkit renders this properly, but Chrome requires you to explicitly state the width of your body to achieve the proper result.