I am trying to make a div fill the possible place after its margins taking effect.
For example if the screen width is 200 and the class is declared as below:
.mini_video {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
Can the mini_video have 160px width and be in the middle?
I am also using Bootstrap if it can help me in any way.
I'd be using padding for this use case. You could use an outside container and add padding to it for the video. Object-fit on the video allows it to scale progressively.
.mini_video-container {
width: 100%;
padding: 0 20px;
max-width: 1000px;
background-color: orange;
}
video {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: fill;
}
https://codepen.io/jeffteachestheweb/pen/abJVNjg
You can add max-width: 100%; instead of width: 100%;
.mini_video {
max-width: 100%;
margin-left: 20px;
margin-right: 20px;
}
Take a look at that example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mini_video {
max-width: 100%;
margin-left: 20px;
margin-right: 20px;
border: 1px solid #000;
text-align: center;
}
<div class="mini_video">Hello World</div>
I have three numbers in a div element that is set to display table. I need to center numbers when they are divided in more rows for better experience on narrow devices.
Please run code snippet at full page and then reduce screen size (356px for example).
What I want:
case1: margin|div|div|div|margin
--------------------------------
case2: margin|div|div|margin
margin|div| |margin
--------------------------------
case3: margin|div|margin
margin|div|margin
margin|div|margin
Solved! ...added code + eddited snippet, feel free to try :)
Edit1: There´s aboutqi class which is set to display: table and margin: auto. On wide screen there is only one row and margin works perfect = it´s centered. But when there are 2 or 3 rows margin stop works and aboutqiitems are not centered.
.aboutqi {
margin: auto;
display: table;
}
.aboutqiitems {
float: left;
}
.aboutqiitem {
float: left;
margin-right: 0px;
margin-bottom: 30px;
width: 200px;
}
.aboutqiitem-inner {
width: 100%;
margin: auto;
}
.num {
margin: 0px;
margin-bottom: 20px;
padding-left: 13px;
font-size: 48px;
font-weight: bold;
color: #014493;
}
.num-center {
margin: auto;
display: table;
}
.num-center-last {
margin: auto;
display: table;
position: relative;
left: -7px;
}
/* My solution */
.aboutqiitems-solved {
float: left;
}
#media screen and (max-width: 616px) {
.aboutqiitems-solved {
max-width: 100%;
clear: both;
padding-left: calc((100% - 400px)/2);
}
}
#media screen and (max-width: 416px) {
.aboutqiitems-solved {
max-width: 100%;
clear: both;
padding-left: calc((100% - 200px)/2);
}
}
#media screen and (max-width: 216px) {
.aboutqiitems-solved {
max-width: 100%;
clear: both;
padding-left: 0px;
}
}
<div class="aboutqi">
<p>Hello, need to center numbers when there is more than 1 row.</p>
<div class="aboutqiitems">
<div class="aboutqiitem">
<div class="aboutqiitem-inner">
<div class="num-center"><p class="num">1</p></div>
</div>
</div>
<div class="aboutqiitem">
<div class="aboutqiitem-inner">
<div class="num-center"><p class="num">2</p></div>
</div>
</div>
<div class="aboutqiitem last">
<div class="aboutqiitem-inner">
<div class="num-center-last"><p class="num">3</p></div>
</div>
</div>
</div>
</div>
</br>
</br>
<!-- My Solution -->
<div class="aboutqi">
<p>How I solve it. Fell free to change page width :)</p>
<div class="aboutqiitems-solved">
<div class="aboutqiitem">
<div class="aboutqiitem-inner">
<div class="num-center"><p class="num">1</p></div>
</div>
</div>
<div class="aboutqiitem">
<div class="aboutqiitem-inner">
<div class="num-center"><p class="num">2</p></div>
</div>
</div>
<div class="aboutqiitem last">
<div class="aboutqiitem-inner">
<div class="num-center-last"><p class="num">3</p></div>
</div>
</div>
</div>
</div>
Example: http://www.dcit.sk/ ... almost at the bottom of the page
You should use media queries in your CSS sheet to help with this. It looks like your numbers are splitting onto 2 rows around 616px, so you want to do something along the following lines:
#media screen and (max-width: 616px) {
.aboutqiitems {
width: 100%;
}
.aboutqiitem {
display: block;
clear: both;
width: 100%;
}
}
Here is a jsfiddle that shows the extra code and how it works: https://jsfiddle.net/4be1k4jr/
You can read more about media queries and how to use them here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
If you're looking to keep the boxes at 200px instead of 100% (in case you have images or something) you can use the following media query. It's a little less clean, but works if you absolutely must keep 200px.
#media screen and (max-width: 616px) {
.aboutqiitems {
width: 100%;
}
.aboutqiitem {
display: block;
clear: both;
width: 200px;
position: relative;
left: 50%;
margin-left: -100px;
}
}
From what I'm taking from this question, you want to change the css when the screen width gets to a certain width. The easiest way to do this is with an #media tag.
Here's my css solution to this problem.
<style>
.aboutqi {
margin: auto;
display: table;
}
.aboutqiitems {
float: left;
}
.aboutqiitem {
float: left;
margin-right: 0px;
margin-bottom: 30px;
width: 200px;
}
.aboutqiitem-inner {
width: 100%;
margin: auto;
}
.num {
margin: 0px;
margin-bottom: 20px;
padding-left: 13px;
font-size: 48px;
font-weight: bold;
color: #014493;
}
.num-center {
margin: auto;
display: table;
}
.num-center-last {
margin: auto;
display: table;
position: relative;
left: -7px;
}
#media only screen and (max-width: 615px){
.aboutqiitem{
width: 100%;
}
.aboutqiitems{
width: 100%;
}
.num{
padding: 0;
}
.num-center-last {
left: 0;
}
}
</style>
Keep in mind that you also need to set a viewport width with a meta tag in your head tag.
<meta content="width=device-width" name="viewport">
This would also work:
#media only screen and (max-width: 615px){
.aboutqiitems{
float: none;
}
.aboutqiitem{
float: none;
margin: auto;
}
.num-center-last{
position: inherit;
}
}
I'm want to put a picture inside a div, with a specified width an height. However the image is still bigger than the div size:
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<img src="images/Halloween/bat_sm.png" width="130" height="76"/>
</div>
</div> <!-- End Designs -->
<style>
#content .Designs .Thumbnails img {
margin: .3em 0;
min-width: 0;
}
#content .Designs .Thumbnails {
width: 143px;
height: 95px;
margin: auto;
}
</style>
My website for reference: http://mast.salemstate.edu/itc18244/Portfolio/
You have there min-width: 246px in your styles.css in line 44.
You can overwrite that using:
.Thumbnails img {min-width: 0;}
Or better, set min-width to images where you need that, not to all images (you more specific selector than img).
On line 44 of your styles.css file you have:
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
The min-width: 246px; rule is taking precedence. You either need to remove that rule, or override it.
Replace these in your CSS code:-
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
With:-
img {
min-width: 0px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
Below is a simple html web page that is responsive except for one div (goplay) that over lays other parts of the page when screen size is reduced, instead of dropping below the image.
Styling Sheet external
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-30px;
padding-top: 5px;
max-width: 100%;
}
#goplay {
position: relative;
display: inline-block;
float: right;
margin-top:-250px;
margin-left:80px
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
Html which is set to call the above css
<div id="wrapperlp">
<div style="background-image: url(https://.jpg); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">Some Text</div>
<div id="para">More Text</div>
<div id="game_img"><a href="//www.youtube.com/" target="_blank"><br />
<img src="https://.png" height="auto"/></a></div>
</div>
</div>
<div id="goplay">----form----/div>
<div id="spacer">
<div style="position: relative; float: left">Text</div>
</div>
margin-top and left should in %. thats y its overlay becoz of px
First off, it looks like you're missing a couple of divs.
The goplay div doesn't have a closing tag, (well it's got one but not that works)
Also your bottom spacer looks like it's missing a closing tag as well. Not sure if it's supposed to wrap anything or what.
Perhaps you had some copy/paste errors?
Normally if you set a negative margin it will overwrite other divs. You should, for the most part, not have to use negative margins.
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.