I'm using the below CSS to force the footer to the bottom of the page
#bump {
margin-top: 50px;
height:150px;
}
#footer {
padding-top: 5px;
min-height: 150px;
background-color: #284602;
color: #ecf0f1;
position:absolute;
bottom:0;
width: 100%;
}
This works fine on a medium or large screen device, on a smaller device however the footer can end up over the content (responsive footer grows and effectively doubles in height on a small device). So I thought I could use a media query at the end of my style.css with this:
// Small devices (landscape phones, less than 768px)
#media only screen and (max-width: 768px) {
#bump {
margin-top: 50px;
height:300px;
}
#footer {
padding-top: 5px;
min-height: 300px;
background-color: #284602;
color: #ecf0f1;
position:absolute;
bottom:0;
width: 100%;
}
}
Its not working though - have I misunderstood something? The media query is at the end of my document, and looking at the developer tools it still considers height to be 150PX on a small screen.
Thoughts pls? Thanks
Related
I use CSS and HTML based social sharing plugin for my WordPress site. It's natively not supporting fixed position. Then I used the following additional CSS to make it sticky only on the mobile devices. I think max-width: 767px is ok for mobile devices (if I'm wrong please correct).
It works on my tested device, but when I'm scrolling page this widget position slightly changes and again it comes to the fixed position.
How do I fix this position change? For better understanding, I added gif at the end of the post.
#media only screen and (max-width: 767px) {
.socialsharing {
position: fixed;
top: 90%;
-webkit-transform: translateY(-7.5%);
-ms-transform: translateY(-7.5%);
transform: translateY(-7.5%);
display: flex;
width: auto-flow;
bottom: 0;
margin-right: auto;
margin-left: auto;
justify-content: center;
}
I hope this answer will help you to fix your problem, there are a lot of ways to handles fix footer issues definitely but I prefer this kind of class which is really simple to understand because you set a div or body to 100% of viewport height and then margin-top: auto and bottom:0; will fix the stack in footer all the time problem. Good Luck
.h-100{
height : 100vh;
}
.button {
background-color: orange;
}
/* I added class here to show how its working in Code Snippet, you don't need to do this part of css*/
.socialsharing {
position:fixed;
bottom:0px;
width: 100%;
margin-top: auto !important;
display: block !important
padding: 10px;
padding-bottom: 0px;
text-align: center;
z-index: 999;
}
/*end of extra Css*/
#media only screen and (max-width: 767px) {
.socialsharing {
position:fixed;
bottom:0px;
width: 100%;
margin-top: auto !important;
display: block !important
padding: 10px;
padding-bottom: 0px;
text-align: center;
z-index: 999;
}
}
<div class="h-100">
<div class="bodyContent">
<h3> Social Media in Footer </h3>
</div>
<div class="socialsharing">
<input type="button" value="StackOverflow" class="button"/>
</div>
<div>
on my website I have a menu. It looks ok on big laptop, tablet and mobile but for small laptops, the logo goes on the menu.
I would like to change the mobile breakpoint of the menu to become a burger menu earlier.
I am using wordpress and the Stockholm Theme.
If there is an area where you can write custom css, a possible solution is to use a media query.
#media only screen and (max-width: 600px) {
//your css styles here
}
This media query applies the styles inside whenever the screen width is smaller than 600px.
There are many resources out there for learning how to create hamburger menus. This should answer your main question.
#media only screen and (max-width: 1199.98px) {
.main_menu { display: none!important; }
.mobile_menu{ display: block !important; }
.mobile_menu_button { display: table !important; }
}
.logo_wrapper {
left: 45%;
position: absolute;
height: 50px!important;
}
.q_logo {
display: table-cell;
position: relative;
top: auto;
vertical-align: middle;
}
.q_logo a {
left: -50%;
width: auto !important;
}
.q_logo img {
top: 0 !important;
left: 0;
}
.header_inner_left{
position: relative!important;
left: 0!important;
margin-bottom: 0;
}
}
1199.98px is the breakpoint that Bootstrap uses for small desktops, but change it to whatever breakpoint fits best for you.
I was curious to what this code does. I found it on a site, and I am wondering if it has anything to with device optimization. It seems to effect the whole page through all devices. Especially the part that says "#media screen and (min-width:992px)".
<style>
html {
-webkit-font-smoothing: antialiased;
}
.w-container {
max-width: 100%;
}
.w-container .w-row {
margin-left: 0;
margin-right: 0;
}
.w-row {
margin-left: 0;
margin-right: 0;
}
.w-row .w-row {
margin-left: 0;
margin-right: 0;
}
.w-col .w-col, .w-col {
padding-left: 0;
padding-right: 0;
}
.pad-row .w-col {
padding-left: 10px;
padding-right: 10px;
}
.pad-row.w-row, .pad-row .w-row {
margin-left: -10px;
margin-right: -10px;
}
/*---------------------------------*/
.slider-outer {
display: table;
width:100%;
height: 100%;
}
.slider-left, .slider-right {
display: table-cell;
width:50%;
height:100%;
vertical-align: middle;
}
.slider-left {
text-align: right;
}
.slider-right {
text-align: left;
}
/*---------------------------------*/
.w-slider-nav-invert>div {
border: white 3px solid;
background: black;
}
.w-slider-nav-invert>div.w-active {
border: white 3px solid;
background: white;
}
.w-slider-dot {
width: 1em;
height: 1em;
}
/*---------------------------------*/
.table {
display:table;
width: 100%;
}
.t-row {
display:table-row;
}
.t-cell {
display:block;
vertical-align: top;
}
#media screen and (min-width:992px) {
.t-cell {
display:table-cell;
vertical-align: top;
}
}
</style>
I know that this is css, but it seems like clever code to make the page optimizable through all devices. It is in an html embed on this site https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d. You can go in there and double click on an html embed, and the code will be there.
What you're looking at is known as a media query.
The min-width: 992px you see denotes that the CSS inside of it will only trigger of viewports that are at least 992px wide (which is the equivalent of a laptop). You can think of media queries as 'conditional CSS logic' to control how a website looks on different devices.
Note that the media queries pertain to the browser width / height, not the screen width / height. As such, manually resizing your browser window will trigger media query breakpoints.
In this specific case, .t-cell { display: table-cell; vertical-align: top; } is applied when the viewport is at least 992px wide. This will make the content display in a tabular format on larger devices, while the content retains display: block for mobile devices (allowing it to stack).
I am having trouble with "media only screen" styling. It looks like that on my mobile phone (ip7):
My css code is like this, but it doesn't have any affect on the page look. I have put meta things in my html file:
#media only screen and (max-width: 768px) {
body {
background-image: none;
background-color: white;
font-size: 20px;
}
#katalog {
height: 10px;
}
#salon {
width: 200px;
}
}
For example orginal #katalog style looks like this
position: relative;
width:50%;
height: 700px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
I was having troubles posting the html code using 'code option' that is added here, so I think
using jsfiddle is better
My page hosted -> https://james0nerep.000webhostapp.com/#
I have created some CSS that uses media queries:
#media (max-width: 1230px) {
.under_navi {
height: 300px;
text-align: center;
.container {
width: 100% !important;
}
.left_image {
float:none;display: inline-block;
width: initial !important;
}
.left_image {
width: 100% ;
}
}
.right_icons {
float: right;
margin-top: 18px;
width: 100%;
text-align: center;
}
.right_icons .icon {
float: none;
display: inline-block;
margin-left: 13px;
}
}
On Windows or any other device it is OK, but not on a MacBook.
The #media (max-width: 1230px) line means the styles will be applied only after 1230px device width.
But on 13.3-inch MacBook (2560 x 1600) it is being applied all the time.
Any ideas?
I noticed a lot that when I was designing on a retina display, it would just ruin most of my work. Try to adjusting your view port settings so it displays as regular resolution and work from there... Until the market is saturated with screens higher than 1080, it kind of sucks to work at higher!