I am building a wordpress site and am trying to absolutely position some social media icons on the bottom right for a site >60em and the top right for <60em screen resolution. The follow code works fine in all browsers and OS except Safari. Not sure what's going on. Any thoughts?
Site: http://www.itsjustchicken.com (see instagram icon on right)
.social-icons {
margin: 1% 1%;
position: absolute;
bottom: 0;
right: 0;
}
#media (max-width: 60em) {
.social-icons {
margin: 1% 1%;
position: absolute;
top: 0;
right: 0;
}
}
Try this:
#media screen and (max-width: 60em) {
.social-icons {
margin: 1% 1%;
position: absolute;
top: 0;
right: 0;
}
}
Related
I have a responsive site that works perfectly fine on all desktop browsers as well as mobile Chrome, resizing the way I want no matter how narrow the window gets, but I'm getting a horizontal scroll on mobile Firefox. My content is just slightly too big, although I can't imagine how with my CSS. Here's what I believe is relevant:
#main {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.infoSection {
display: inline-block;
height: 300px;
margin-bottom: 75px;
}
.infoSection img {
position: relative;
float: right;
max-width: 50%;
top: 50%;
transform: translateY(-50%);
}
#media (min-width: 0) and (max-width: 470px) {
.infoSection {
height: auto;
margin: 0 0 30px;
}
.infoSection img {
display: block;
float: none;
max-width: 80%;
margin: 20px auto 0;
transform: none;
}
}
Existing questions about horizontal scrolling on mobile all seem to involve setting overflow-x to hidden, which doesn't help because I want my content to resize properly. :/
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 }
}
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 */
}
}
I am trying to get into responsive design/layout with Bootstrap and CSS, but I am kind of confused of how could a change a box to be in the center of the screen.
I have a login pane that in Google Chrome has size 277x256 (that size could fit many smartphone screens). So I made a CSS like that:
.login .pane {
position: absolute;
top: 50%;
left: 50%;
margin: -128px -138.5px; /* half of the size in Google Chrome */
background: #f0f0fd;
background: rgba(240,240,253,0.90);
padding: 22px 32px;
}
You can see the complete code in: http://jsfiddle.net/H5Qrh/1/
=== UPDATE ===
I made a cleaner code and tried using Absolute Centering instead of Negative Margins:
.center-pane {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 277px;
height: 320px;
}
My updated Fiddle: http://jsfiddle.net/H5Qrh/3/
Now the footer is above the box.. that shouldn't occour.
You're using absolute but I'd change that to fixed (this will work on both).
I set your height and widths, but you can change them, and because you want it responsive, you can change them with a few media queries. For example mobile you might want width to be 90% or 100%.
.login .pane {
position: fixed; /* could be absolute */
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 300px;
height: 250px;
}
Here's a jsfiddle
I am learning about responsive design and #media is not working in the manner that I thought it should. I have a subnav bar. Here is the css:
.subnav-fixed {
background-color: #eeeeee;
position: fixed;
top: 50px;
left: 0;
right: 0;
z-index: 1030;
border-color: #d5d5d5;
border-width: 0 0 1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#media (max-width: 767px) {
.subnav-fixed {
top: 61;
}
}
When my page is under 767px, then I want the top to drop to 61px. This is not happening. The #media is after the .subnav class. More than being told how to make this work, I would like to understand what is happening. Any help or links would be great.
Try
#media all and (max-width:767px){
.subnav-fixed {
top: 61px;
}
}
Added all and and also you just wrote top: 61; So, I added px at the end