I have one button that I must position absolute in accordance with what I'm doing. This is fine; except at 1600px resolution - the button goes out of the screen; I want to utilize media queries to fix this, but my first two efforts are not working and moving the element at the specified viewport and I'm not sure.. why.
Attempt # 1:
#media screen and (min-width:1600px) { /* large resolution */
#menu_tog { margin-left: 337px; }
}
Attempt # 2:
#media (max-width:1600px;) and (min-width:1300px;) { /* large resolution */
#menu_tog { margin-left: 337px;}
}
Original (expect position change at 1600)
#menu_tog {
cursor: pointer;
margin-left: 138px;
margin-top: 230px;
max-height: 35px;
max-width: 50px;
position: absolute;
z-index: 999;
}
Make sure you're using top and left with absolutely-positioned elements, not margins. From there, a simple media query should do the job:
#menu_tog {
position: absolute;
cursor: pointer;
margin: 0;
left: 138px;
top: 230px;
max-height: 35px;
max-width: 50px;
z-index: 999;
}
#media (min-width: 1600px) {
#menu_tog {
left: 337px; /* adjust as necessary */
}
}
Related
Trying to figure out why this frame http://www.kicks.se/#take-your-pick
Will not render on an Ipad in landscape mode
The css that I can see is
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Any ideas on how this can be expanded to be shown the entire frame? I am going mad looking at it!
Well, it depends if you set your width/height depending on the parent container. The idea to match the parent device's height and width is there in the OP code. But this issue may also depend on browsers AND/OR padding issues. This example represents this technique here.
HTML:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
CSS:
.box {
position: relative;
width: 50%; /* desired width */
}
.box:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
This question already has answers here:
SASS/SCSS: Refer to property without using an intermediate variable
(2 answers)
Closed 7 years ago.
Following is the snippet in SCSS:
.element-a {
position: absolute;
right: 0;
width: 216px;
height: 232px;
#media (max-width: 1000px) {
right: 0; // Half of 0
width: 118px; // Half of 216 px
height: 116px; // Half of 232 px
}
}
.element-b {
position: absolute;
width: 140px;
height: 152px;
right: 216px + 10px;
#media (max-width: 1000px) {
width: 70px; // Half of 140px
height: 76px; // Half of 152px
right: 113px; // Half of 226px
}
}
As can be seen, if the media-query max-width:1000px is satisfied. The attributes right, width and height should be half of its original values. However, it looks not good practice to hardcode the value by calculating it manually..
Is there a better way to write this in SASS/SCSS? Or is there a way to refer the value in outer scope?
Use variables, here's an example:
$b-width: 140px;
.element-b {
width: $b-width;
#media (max-width: 1000px) {
width: $b-width/2 // Half of $b-width
}
}
On this website, when the viewport width is reduced to 595px or below, the following CSS should apply:
#media (max-width:595px) {
#header-left,#header-right {
display: block;
width: 100%;
float: none;
}
}
The browser is recognising the CSS, and it appears active, however, #header-left (which contains the logo) is not 100% wide, or is #header-right (which contains the phone number).
That is, #header-left & #header-right still try to take up half of the width, and appear side by side, instead of above and below each other.
Why is this occurring? Thanks.
Remove position:absolulte; from #logo {position: absolute;top: 0px;left: 0px;} and remove from #menu Then your code works fine.
You should override the following commented rules in your css specific to the 595px size:
#logo {
/* position: absolute; */
/* top: 0px; */
/* left: 0px; */
}
#header-right {
width: 50%;
float: right;
padding-top: 8px;
/* text-align: right; */
}
#menu {
/* position: absolute; */
/*top: 80px;*/
/*left: 0px;*/
background: url(images/menu-bg.png) no-repeat;
width: 960px;
height: 55px;
}
Note: Override the commented rules
I currently am using a fixed header for my website: http://www.destinykingproductions.com/test/ I have attached the css I currently have. Anyone have any suggestions on why this is happening?
#main {
background-color: transparent;
margin-top: -40px;
height: auto;
max-height: none;
width: auto;
padding-bottom: 35px;
}
header#masthead {
height: 103px;
background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg);
position: fixed;
z-index: 856;
width: 100%;
margin-top: 0px;
top: 0px;
}
nav.main-navigation {
top: -200%;
background-color: transparent;
z-index: 4670;
}
nav.main-navigation ul.menu li {
padding-left: 17px;
}
nav.main-navigation ul.menu {
margin-left: 18%;
}
#shiftnav-toggle-main {
display: none;
}
Thank you for your assistance!
The comments above are correct - the "sticky" class nav is being added / toggled at some point. When you add 'display:none' to that sticky class, then it is fine on a desktop view. However, it looks like you are using that class for something with mobile because when the screen is resized smaller and back to normal then the side menu area doesn't go away. It looks like you may want to move that sticky class to your 768px media query and/or have it not show on larger screens.
/*normal css*/
.main-navigation.sticky { display: none }
#media screen and (max-width: 768px)
{
.main-navigation.sticky { display: block }
}
So my layout looks like this:
Left bar, width: 200px; left: 0;
Center, width: 700px; left: 250px;
Right, width: 200px; right: 10px;
This works, but for bigger screen sizes, I want Center to be, well, centered. Regardless of size, though, I always want at least left: 250px
How can I achieve this?
You can use CSS media queries to achieve this:
#media screen and(min-width: 1001px){
.center{
margin: auto;
}
}
#media screen and(max-width: 1000px){
.center{
left: 250px;
}
}
CSS Media Queries as Marcel presented are probably the best solution. For future reference, generally responsive web development demands the use of %'s rather than pixels to adjust to screen size variance.
approximately -->
Left { width: 17%; left: 0; min-width: 250px; /*margin-right: 50px;*/ }
Center { width: 65%; left: 20%; position: absolute; }
Right { width: 17%; right: 10px; }