No matter how I try in my CSS file, the container can't take full width in phone device.
my CSS file:
#media (max-device-width: 1024px) {
.col-sm-2{
width: 100%;
}
.container {
margin: 0 auto;
width: 100%;
}
.col-sm-10 {
width: 100%;
}
}
HTML:
<div class="container">
<h1 >Profile</h1>
</div>
Any suggestion?
You should use container-fluid class instead of container, or if would prefer you can use the sm, lg and so on suffixes , like container-sm
See the docs
Try container fluid
<div class="container-fluid">
<h1 >Profile</h1>
</div>
or add !important to #media like this
#media (max-device-width: 1024px) {
.col-sm-2{
width: 100%;
}
.container {
margin: 0 auto;
width: 100% !important;
padding: 0 !important;
}
.col-sm-10 {
width: 100% !important;
}
}
Related
I am trying to make the overflow of an image appear to be hidden upon a certain screen size, but I cannot find the solution of why this extra spacing appears. Here is the html an css I have so far. I am trying to do this because the image would appear too small.
Bootstrap solutions are also welcome too.
.aboutsplash img{
width: 100%;
height: auto;
margin: 0;
}
#media (max-width: 769px){
.aboutsplash img{
overflow: hidden;
width: auto;
max-height: 150px;
}
}
#media (max-width: 500px){
.aboutsplash img{
position: left;
margin: 0 0 0 -25%;
}
}
<div class="aboutsplash">
<img src="images\sunsetcrop2.jpg" alt="lbl sunset">
</div>
#media (max-width: 769px){
.aboutsplash {
overflow: hidden;
}
}
try this.
I followed these steps to make bootstrap not responsive on desktop but responsive on mobile
http://getbootstrap.com/getting-started/#disable-responsive
But it is also not-responsive on mobile. How can I make it responsive on mobile?
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
In my custom css
#media(max-width:480px) {
.container {
width: 480px !important;
}
}
.container { width: 970px !important; }
HTML
<div class="row topBlock" id="topBlock">
<div class="col-xs-5 text-center">
<div class="marketing" id="download">
<div class="col-xs-12" class="download-badges1">
</div>
</div>
</div>
<div class="col-xs-7 text-center">
</div>
</div>
.container { width: 970px !important; } is overriding your media query. Reverse the selectors and set the width to auto; in the media query so .container does not have a fixed width and will expand to fill the viewport.
.container { width: 970px; }
#media( max-width: 480px ) {
.container { width: auto; }
}
Or better yet, usa a mobile first approach and only define a width when the viewport has scaled beyond on certain width.
#media( min-width: 481px ) {
.container { width: 970px; }
}
div {
height: 200px;
margin: 0 auto;
background-color: rebeccapurple;
}
#media ( min-width: 360px ) {
div {
width: 200px;
background-color: gold;
}
}
<div></div>
It's easy to think that wrapping a selector in a media query would give it a higher specificity, but it doesn't.
#media ( min-width: 360px ) {
.abc { color: red; }
}
.abc { color: blue; }
Amounts to:
.abc { color: red; }
.abc { color: blue; }
Where .abc is going to be blue because the specificity of .abc remains the same, regardless of it being in media query. So the latter rule wins out.
I want to make an 100% full page, within 4 images on each row. But if you resize the window you'll get 3 images than 2 images till there is 1 left. After research I become at #media to fill the full page without getting any blank spaces. Now i've made this jsfiddle but if you resize the results window you will see blank spaces who are not filled. What am I doing wrong?
#media only screen and (min-width : 354px) {
/* Smartphone view: 1 tile */
.image{
width: 100% }
https://jsfiddle.net/8hfLkb3k/
The image always must fill both width's, if the width is 50% for 2 both images must fill it in for 50%.
Thanks.
I recommend using max-widths for your media queries, but you don't have to do this, as long as what you do gives you the intended and correct result.
In my working example I've chosen to set the one-image container for 25% unless something changes like the viewport width.
At 1024, 767 and 600 I've chosen the 1/3 and 1/2 sizes and finally the 100% width.
I expect this is what you mean, but feel free to adapt this code as you see fit, especially to match the media query viewport attributes to what you desire.
* {
box-sizing: border-box;
}
.one-image {
width: 25%;
float: left;
border: 1px solid red;
}
.one-image img {
width: 100%;
border: 1px solid blue;
display: block;
}
#media screen and (max-width: 1068px) {
.one-image {
width: 33.33%;
}
}
#media screen and (max-width: 767px) {
.one-image {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.one-image {
width: 100%;
}
}
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
Your images (<img> elements) are not expanding to the full width of the .image containers because you're missing this rule, which you can add to your CSS:
.image img {
width: 100%;
}
Here's your example code updated to show this working:
.image img {
width: 100%;
}
.f_left {
float: left;
}
#media only screen and (min-width: 354px) {
/* Smartphone view: 1 tile */
.image {
width: 100%;
}
}
#media only screen and (min-width: 708px) {
/* Smartphone view: 2 tile */
.image {
width: 50%;
}
}
#media only screen and (min-width: 1062px) {
/* Small desktop / ipad view: 3 tiles */
.image {
width: 33.3%;
}
}
#media only screen and (min-width: 1417px) {
/* Medium desktop: 4 tiles */
.image {
width: 25%;
}
}
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
Okay, I've got it resizing nicely for devices using a media query. Now I need to reproduce this on a browser resize. Is it possible using only CSS? I'm trying to avoid multiple named divs for scalability (i.e. add another change the min-width etc and it'll still work)
Yes, this may well have been asked before (I really have hunted), but there's just so many ways of framing the question...please indulge me .
The media query with viewport turns the divs into columns of a specific size.
But how on earth do I do this during a browser resize?
If you view this result on device via Chrome inspect etc my point will be abundantly clear.
Thanks all!
#Page {
margin: 0 auto 20px;
width: 98%;
/*1000px*/
background-color: lightgray;
}
#content {
margin: 0 auto 10%;
width: 96%;
background-color: green;
max-width: 1100px;
}
.col_content {
float: left;
margin: auto 1%;
width: 30%;
background-color: pink;
min-width: 225px;
}
#media only screen and (max-device-width: 768px) {
#Page {
background-color: white;
}
#content {
max-width: 400px;
background-color: green;
}
.col_content {
float: none;
margin: 1%;
/*5px*/
width: 100%;
background-color: pink;
}
}
<div id="content">
<!--Content-->
<div class="col_content">
1
</div>
<!--end col_content-->
<div class="col_content">
2
</div>
<!--end col_content-->
<div class="col_content">
3
</div>
<!--end col_content-->
</div>
<!--end content-->
Try changing:
#media only screen and (max-device-width: 768px) {
to
#media screen and (max-width: 768px) {
I use the above on my website and it works on browser resizes and on devices.
I am attempting to implement a responsive layout based on the exmaples and code here: www.responsivegridsystem.com
I have wrapped it a couple of containers as I need a 960px content area centered in a 1000px container.
My intent is that with a width smaller then 960px, both containers just become 100% width. The layout is exactly what I want at full size, but it is not shifting like I want when smaller then 960px.
Current CSS (with some edits based on suggestions, still not working.):
.masterContainer {
position:relative;
margin:0 auto;
margin-top:-10px;
background-color:#FFF;
width:1000px;
overflow: hidden;
}
.pageContainer {
position:relative;
display:table;
margin:0 auto;
width:960px;
overflow:hidden;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 70%;
}
.span_1_of_3 {
width: 30%;
}
#media only screen and (min-width: 481px and max-width: 960px) {
.masterContainer {
width:100%;
}
.pageContainer {
width:100%;
}
}
#media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
}
HTML
<div class="masterContainer">
<div class="pageContainer">
<div class="section">
<div class="col span_3_of_3" id="header">Header
</div>
<div class="col span_3_of_3" id="slideshowContainer">Slideshow
</div>
</div>
<div class="section group">
<div class="col span_2_of_3" id="contentArea">
This is column 1
</div>
<div class="col span_1_of_3" id="rightColumn">
This is column 2
</div>
</div>
<div class="col span_3_of_3" id="footer">Footer
</div>
<div class="col span_3_of_3" id="bottom">
</div>
</div>
</div>
Is something wrong with my #media code or did I break it somewhere else?
Your media queries are telling IDs to do something, while your HTML has them as classes. Change it to something like this:
#media only screen and (max-width:960px){
.masterContainer {width: 100%;}
.pageContainer {width: 100%;}
}
Here is a fiddle with your code and the query. I gave them background colors for the example.
JS Fiddle with your code
From what you've posted there is no #media codes... You cannot have a specific width's set if you intened for the page to be responsive ex. masterContainer width 1000px.. youll need to redo that for example:
#media (min-width: 700px), handheld and (orientation: landscape)
{
.masterContainer{
width:60%; // or whatever you may need
}
}
have a look at some examples.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You need to specify it via #media queries:
#media screen and (max-width: 959px) {
.masterContainer,
.pageContainer {
width: 100%;
}
}
You dont have media queries in your css.
Create separate files for diffrent screen sizes and put styles in there. Thats the easiest way.
And read this article. It will help you to understand how media queries work.
csstricks media queries
The reason it doesn't work is this:
#media only screen and (min-width: 481px and max-width: 960px) that is a wrong query.
It should be:
#media screen and (min-width:481px) and (max-width:960px)
You can't combine the min and max like you had it.