Currently I have the following for a react components css
export default styled.div
#media (min-width: getEmFromPx(400)) {
margin: ...
width: ...
:nth-child($2n+2) {
margin-right: 0px;
}
}
#media (min-width: getEmFromPx(700)) {
margin: ...
width: ...
:nth-child($3n+3) {
margin-right: 0px;
}
}
#media (min-width: getEmFromPx(1000)) {
margin: ...
width: ...
:nth-child($3n+3) {
margin-right: 0px;
}
}
I am setting which element in the div to apply the margin-right 0px while the other have a margin. This works perfectly on small screen sizes but for medium and large it seems the small nth selector is present and overriding the nth selectors in the medium and large... Is there a way to overcome this?
On chrome developer tools I can disabled the nth child selector for small screens which makes medium screens work perfectly. It was my understand that at different media screens the selector would be updated?
your first media query #media (min-width: getEmFromPx(400)) will be apply to all screens having 400px or greater than 400px, because you are using min-width (it is it should applicable min this and up all).
in your 2nd and 3rd media query you are doing same thing, so no need to write it twice.
Here you are setting margin-right: 0 to nth-child(3n+3), but you will have to reset nth-child(2n+2) element which is defined in previous media query. Because nth-child(2n+2) will be applicable all screens 400px above.
Related
I'm trying to add breakpoints to my React App created using CRA. But styled-components seems to ignore the pixels given in the rule declaration unless it passes the 1000px, not allowing me to work properly. Here's the code:
import styled from "styled-components";
export const Margin = styled.div`
padding-top: 5vh;
height: 100vh;
overflow: hidden;
margin: auto;
width: 90vw;
#media (min-width: 768px) { //here is where the problem is
width: 50vw;
}
}`
So, as you can see I've set a breakpoint when screen oversize the 768px (using mobile first). It will ignore that and just set that rule to default, for example, now the width will be 50vw no matter the screen size is minor than 768px. Only if I set pixels above 1000px it'll work properly. How can I fix this?
I'm looking at this 3 fixed-column CSS layout on http://www.vanseodesign.com. I want to use this layout however I'd like to change the way it behaves when I resize the browser.
When the browser is open nice and wide the columns are centered nicely on the page:
Then we reduce the width of the browser and it locks to the left side of the left-most column like this:
What I'd like to do is change the CSS (or javascript if necessary) so that the browser locks to the left side of the middle column instead when the browser becomes too narrow:
I'm not sure how to achieve this though?? Can anyone suggest how to change the code and most importantly why your solution works?
EDIT:
For those reading this question: I marked Salem Ouerdani's answer as the correct one because he was the first to answer with a solution that worked the particular way I wanted. However, it became clear that people were interpreting the question in slightly different ways. So it is worth reading through because there are some really great answers which might suit your situation better. Please upvote them as such.
Try to modify your container div from this :
#container { width: 960px; margin: 20px auto;}
to this :
#container {
width: 960px;
margin: 20px auto;
position: absolute;
left: 50%;
margin-left: -480px; /* half the fixed width */
}
EDIT :
Also you need to add this in order to lock to the left side of the center div whenever your browser size is beyond the fixed 960px :
#media (max-width: 960px) {
#container {
left: 0;
margin-left: -240px; /* Primary Sidebar width */
}
}
UPDATE : As #media (max-width: 480px){} did better solve the issue rather than 960px then I'm adding the related code pen example with the final solution : >> Codepen sample code
Revised Solution (based on OP comment)
Solution by #spenibus is the best and I recommend that. The solution does not work with browsers <= IE9 (IE9 only partially supports it). If you wish to make it cross browser compatible, then I suggest using javascript to manually set the scroll.
Fiddle: http://jsfiddle.net/dp7gwcn5/4/
$(function () {
$(window).resize(function () {
var width = $(window).width();
if (width <= 960) {
if(width <= 480) $(document).scrollLeft($('#content').offset().left);
else $(document).scrollLeft((960-width) / 2);
}
});
});
Old Solution
Solution #1 (Scroll: Do not hide anything, just cling)
If you wish to keep the sidebar still accessible by scrolling but only make the browser's left edge stick to the left edge of your main content #content. Then manipulate the scroll
Fiddle: http://jsfiddle.net/dp7gwcn5/. The fiddle will let you change the size of your preview window, as soon as you shrink it enough to hide the secondary sidebar the window clings to the left edge of #content
$(function(){
$(window).resize(function(){
if ($(window).width() < 720) {
$(document).scrollLeft($('#content').offset().left);
}
});
});
Note: The width 720 was given based on the widths you have set on your sidebars and conents, you can modify it to be calculated on the fly if you wish.
Solution #2 (Static: Hide primary sidebar)
If you wish to hide the primary sidebar then simply use a media query to hide the primary sidebar when your window size is small
Fiddle:http://jsfiddle.net/dp7gwcn5/1/
#media all and (max-width:720px) {
#primary {
display:none;
}
#container {
width:720px;
}
}
Solution #3 (Dynamic: Hide primary sidebar)
Solution #2 is static and there is not much you can do about it, however, if you wish to compute the widths on the fly and hide the side bar, use a script
Fiddle: http://jsfiddle.net/dp7gwcn5/2/
Script
$(function(){
$(window).resize(function(){
if ($(window).width() < 720) $('#container').addClass('small');
else $('#container').removeClass('small');
});
});
CSS
#container.small {
width:720px;
}
#container.small #primary {
display:none;
}
My Suggestion
My suggestion is to use Solution #1 if you do not wish to make it mobile compatible. If you wish to make it mobile compatible I suggest using Solution #2 with a menu button to show your primary sidebar.
Note: Solution #1 and Solution #3 will work on most browsers. Solution #2 will not work on browsers < IE9
Update 2015-08-03 01:59 +0000
Reading your comment on another answer about staying centered until the left edge of the centered column meets the browser edge made things much clearer.
This will keep the middle column centered until the browser is as large as the column, then it will stick to the left edge of the column.
html, body {
margin:0;
padding:0;
}
#media (max-width: 480px) {
#container {
margin-left:-240px;
}
}
#media (max-width: 960px) and (min-width:481px) {
#container {
margin-left:calc( (960px - 100%) / -2 );
}
}
Original anwser
Pure css. The values of "960" and "720" should be adjusted to account for body margin. Works under Firefox, no guarantees elsewhere. Using calc() for adaptive negative margin based on browser width.
/* fixed negative margin below 720px width */
#media (max-width: 720px) {
#container {
margin-left:-240px;
}
}
/* adaptive negative margin vetween 720px and 960px width */
#media (max-width: 960px) and (min-width:721px) {
#container {
margin-left:calc( (960px - 100%) * -1 );
}
}
Preview
From what I can see, this template uses the margin 0 auto in the container. The way the margin is set up, it centres the "container" which contains all three columns. This means that the content is currently centred by treating each of the three columns as one big one.
This layout is also not responsive. This means that it does not adapt to larger or smaller browser sizes. It has a fixed width and height.
A simple solution is to change the pixel units to %. This will create a fluid layout that will adapt more easily to the browser size as the measurements are based on a portion of the window size instead of having a fixed size.
For example:
body {
width: 50%; }
No matter what size the browser window is, the body will only account for half the size.
If you are looking to have all three columns visible in the exact same layout or just visible in the browser without scrolling to the side no matter what device or screen size, then you need to use media queries. Media queries are css properties that let you set specific css styles for specific resolutions or screen sizes.
For example:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
#media screen and (max-width: 600px) {
body {
background-color: purple;
}
}
In my example (although very rough), the background of the body will be purple up to a small size of 600px. It will then change to blue until a size of 300px.
You can read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
1 - remove the margin from your BODY CSS.
2 - wrap all of your html in a wrapper ... all your body content
3 - Define the CSS for the wrapper:
This will hold everything together, centered on the page.
#conatiner{
margin-left:auto;
margin-right:auto;
width:960px;
}
.container {
max-width: 960px !important;
margin: 0px auto;
position: relative;
}
it will work definitely .
html, body
{
overflow: scroll !important;
ms-overflow-y: auto;
float: none !important;
overflow-y: auto;
overflow-x: visible;
}
try this in css
or in script use
function enableScrolling()
{
document.body.scroll = "yes";
document.body.overflow="hidden";
}
#media(max-width : 960px)
{
#primary{width:0;}
#content{width:66.7%}
#secondary{width:33.3%}
#container{width:100%}
}
Hope this will work for you.
You can do this easily with media queries
At the bottom of your CSS, just add something like:
#media screen and (max-width : 960px) {
#container {
margin-left: -260px;
}
}
When the window size becomes less than 960px, it will shift the container to the left by the width of the left column, leaving it fixed on the left side at the middle column
Here is a fiddle: https://jsfiddle.net/Locwv54q/
EDIT:
With the addition of CSS transitions to make things smoother you can use something like this
At the bottom of your CSS add a media query:
#media (max-width : 960px) {
#container {
left: 460px;
margin-left: -700px;
}
}
Then during the definition of container earlier in the CSS, use something like this:
#container {
position: absolute;
left: 50%;
width:960px;
margin-left: -480px;
margin-top: 20px;
margin-bottom: 20px;
-webkit-transition: margin-left 1s ease-in-out;
-moz-transition: margin-left 1s ease-in-out;
-o-transition: margin-left 1s ease-in-out;
transition: margin-left 1s ease-in-out;
}
Of course can fiddle with the values/timings to get things exactly as you want, but this general approach works on my end
updated jsfiddle: https://jsfiddle.net/8L5n58jy/
EDIT2:
This should now work as intended
#media (max-width : 480px) {
#container {
margin-left: -240px;
left: 0px;
}
}
#container {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
margin-top: 20px;
margin-bottom: 20px;
}
I would suggest to always center the #container with
position: absolute;
left: 50%;
transform:translateX(-50%);
Then when it will only fit the center column and 1 column (max-width: 720px) you fix the position:
#media (max-width: 720px) {
#container {
left:240px;
transition: left 2s;//make it smooth
}
}
A plus for the crazy tab resizers would be to add transition to animate the change transition: left 2s; (but thinking about 'normal' users it may not be necessary)
fiddle
You should definitely read about Twitter-Bootstrap framework, bro:
<div class="container">
<div class="row>
<div class="col-sm-3">
<h2>Left</h2>
</div>
<div class="col-sm-6">
<h2>Center</h2>
</div>
<div class="col-sm-3">
<h2>Right</h3>
</div>
</div>
</div>
would do your work, as it is RESPONSIVE. Just saying!
Why not use Bootstrap to create the columns and use the col-sm- or the col-xs- to pull the middle container into place?
Here is the example at the Bootstrap Website
I have an image that I'm sizing with a percentage of it's container, what I would like to do is to lower that percentage when the container is bigger (window is maxed) and a higher number when the window is shrunk.
Rather then write a script using some type of switch or multiple if statements I was wondering if anyone had any ideas on a possible math formula solution kind of thing.
For example a width 1080px would have a result of 1% and
a width of 358px would have 5%
You should be able to use media queries for this with varying width sizes. There is really no magic mathematical formula for this.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use the following media query to achieve this:
#media only screen and (max-width: xxxpx) and (min-width: yyypx){
#container img{
width: z%;
}
}
Example:
#media only screen and (max-width: 400px) {
#container img{
width: 5%;
}
}
#media only screen and (max-width: 1000px) and (min-width:401px){
#container img{
width: 3%;
}
}
#media only screen and (min-width:1001px){
#container img{
width: 1%;
}
}
Replace the pixel values with the desired values and set multiple range as required
For more on media query read this:
http://css-tricks.com/css-media-queries/
Please can any one help me.
When I resize the browser then the collapse dropdown's backpart are shown what I dont want(problem 1.png).
I want that when I will resize the browser the dropdown and it backpart will be hidden accroding to the header of dropdown.
when on hover, list item are not showing , i want to show images also on hover state.( problem 2png )
problem live link:
![enter image description here][1]http://tb.taslimk.tk/
Another problem:)
It looks like "style4.css" uses several media queries to change the size of the element (.cd-dropdown) that says "FILTER BY INTEREST". Here's an example of one in there:
#media (min-width: 768px) and (max-width: 979px) {
.cd-dropdown > span {
font-size: 12px;
line-height: 4.2em;
}
.cd-dropdown ul li span {
font-size: 12px;
}
.cd-dropdown, .cd-select {
width: 220px;
}
}
Whereas the width of .cd-dropdown at full screen width I believe is 300px.
I think the issue is that the list element (ul, li), which is a child of .cd-dropdown, is not changing width as well whenever the media queries take charge.
I think the ul underneath .cd-dropdown only ever has a width of 100% set:
.cd-dropdown ul {
position: absolute;
top: 0;
width: 100%;
}
Maybe if you change the width of the ul to be the same px width as .cd-dropdown in every media query block, then this could solve your issue (the bug seems to revolve around the fact that the width of the ul is set to 100%).
It's a bit hacky, but one way of handling this without having to modify the core dropdown library would be to add the following css rules to override the inline styles that get set by the library.
.cd-dropdown ul li {
width: 100% !important;
left: 0 !important;
}
The majority of desktop and laptop screens nowadays have a width greater than the height. The screen is "wide" not "tall." Smart phones have done something rather cool by enabling the orientation of the phone to influence how the content is presented.
I'd like to do this with media queries, so that if someone on a mac with a big monitor has their browser window sized so that it's very "tall" (height is greater than width) they would see a header and footer. But if they went fullscreen or "wide" (width is greater than height) they would see a sidebar on the left and maybe also the right.
I'm trying to take full advantage of wide screens, and orientations and such. How to do this with media queries or javascript?
I'm sure you have it by now, but here is an example for others who pass by. Like the previous person said, people should take the time to read this: http://www.w3.org/TR/css3-mediaqueries/
Now, here is an answer. You can put "landscape" or "portrait" in conjunction with widths and heights in your #media rules. This assumes that height is greater than the width and vice versa. I usually only use min-width and then have a few separate #media rules for those specifically. One example would be landscape: horizontal scroll (desktop) and portrait: regular vertical (tablet/phone )
Those 2 wouldn't do it alone though, you'll need some combinations. I think we can assume your sidebar would be a hindrance on screens smaller than 600px wide.
/* 01 */
#media (min-width: 0) {
/* this is the same as not using a media query... */
.main-content {
width: 100%;
float: left;
}
.side-bar {
width: 100%;
float: left
}
}
/* 2 */
#media (min-width: 600px) and (orientation:landscape) {
.main-content {
width: 70%;
float: left;
}
.side-bar {
width: 30%;
float: left
}
}
HERE is a jsfiddle - note that box-sizing: border-box; is used for padding issues.
2017 UPDATE
I think most people would use flexbox now: https://jsfiddle.net/sheriffderek/egxcgyyd/
.parent {
display: flex;
flex-direction: column;
}
#media (min-width: 600px) and (orientation:landscape) {
.parent {
flex-direction: row;
}
.child-1 {
min-width: 260px; /* or flex-basis: xx - try them both */
}
.child-2 {
flex-basis: 100%; /* "if at all possible... please try to be this size..." */
}
}
I know that this is an old question, but the solution that I used was this:
.main-content {
/* Default for when the height is greater than the width of the screen*/
width: var(--content-width-small);
}
#media screen and (min-width: 100vh) {
/* The width is greater than the height */
.main-content {
width: var(--content-width-wide);
}
}
This is much more intuitive, and works perfectly well (at least for me, because I wanted to have an image with dimensions based on whether the screen's height was greater than it's width or vise versa).
Media Queries are probably going to be your solution here for the modern browsers that support it. You can grab a copy of the documentation from here:
http://www.w3.org/TR/css3-mediaqueries/
But you might find the following tutorial useful (Google for: Media Queries Tutorial):
http://webdesignerwall.com/tutorials/css3-media-queries
Once you pick up the basics doing things like hiding elements if the screen falls below a specific resolution:
#media screen and (max-width: 600px)
{
.sidebar
{
display: none;
}
}
Hope this helps.
As stated prior, media queries are the way to go.
More specifically, if you are attempting to detect if the viewport is taller than it is wide (height > width), you might take a look at the aspect ratio documentation.
For example, let's say you wanted to hide or show a different title based on when the viewport is tall or wide. Since a 1/1 aspect ratio is a perfect square, you can use a combination of min-aspect-ratio and max-aspect-ratio to detect when a change between "tall" and "wide" occurs.
The code might look like this:
#media (max-aspect-ratio: 1/1) {
body {
background-color: cornflowerblue;
}
.wide {
display: none;
}
}
#media (min-aspect-ratio: 1/1) {
body {
background-color: whitesmoke;
}
.tall {
display: none;
}
}
#media (aspect-ratio: 1/1) {
.wide {
display: block;
}
}
<div class="wrapper">
<h1 class="tall">I'm taller than I am wide</h1>
<h1 class="wide">I'm wider than I am tall</h1>
</div>
There is a caveat, though. You might have noticed a third media query that checks if the aspect ratio is a perfect square. Because of how media queries currently work with min and max values, there is a 1px point where some weird stuff can happen, and both are active. Having a query that checks for this perfect square scenario prevents the screen from not displaying either title in the case where it is a perfect square.