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>
Related
Okay so ill explain this as best i can.
I have a booking page widget on my website from simplybooking.
It works great on desktop but does not scale on mobile
This is the page in question : https://www.meetaroundthecampfire.com/bookings-checkout/
So this is the code ive tried to use in the page, to make it responsive
<div class="embed-container"><script src='//simplybook.me/v2/widget/widget.js'></script> <script>var widget = new SimplybookWidget({'widget_type':'iframe','url':'https:\/\/meetaroundthecampfire.simplybook.me','theme':'concise','theme_settings':{'timeline_show_end_time':'0','light_font_color':'#ffffff','sb_base_color':'#5a3afd','booking_nav_bg_color':'#ffffff','dark_font_color':'#333333','hide_img_mode':'0','sb_busy':'#dad2ce','sb_available':'#d3e0f1'},'timeline':'modern','datepicker':'top_calendar','is_rtl':false,'app_config':{'predefined':[]}});</script></div>
With the following css in the stylesheet
.embed-container { padding-bottom: 20%; padding-top: 20%; overflow: scroll; max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 90%; }
But it still doesnt come up right?
Any ideas or help from you legends? because im confused!
Cheers
Ez
You have width 1800px at:
#main2 {
margin: 0 auto 30px;
width: 1800px;
}
You should edit this with media queries. Put it by default with 100%, and then with queries change it correspondingly. Example:
//default
#main2 {
margin: 0 auto 30px;
width: 100%;
}
For devices > 768px:
#media (min-width: 768px){
#main2 {
width: 750px;
}
}
etc. etc...
I have CSS that looks like this:
#FSBDiv-Inner {
position: fixed;
top: 20%;
left: 25%;
width: 50%;
z-index: 999;
display: flex;
justify-content: center;
background-color: white;
}
for mobile devices I need to to do this:
#FSBDiv-Inner {
position: fixed;
top: 20%;
width: 100%;
z-index: 999;
display: flex;
justify-content: center;
background-color: white;
}
What do I need to do to the css entry to change values depending on screen resolution?
In general, css for limited selectors (such as screen width) is applied via the #media rule.
In your particular example (let's say we only want the rule to apply only to screens with less width than 400px, code would be the following.
#media only screen and (max-device-width: 400px) {
#FSBDiv-Inner {
position: fixed;
top: 20%;
width: 100%;
z-index: 999;
display: flex;
justify-content: center;
background-color: white;
}
}
For further context of the #media rule, I'd absolutely suggest you to check the documentation ( https://developer.mozilla.org/en-US/docs/Web/CSS/#media ) (as there are some important tweaks, as to for example, if the screen is in landscape or potrait position and so on).
You can use media queries to customize the styles according to the devices resolutions, find the link below for more informations:
Css media queries
what you are trying to do is making the page responsive for mobiles too . you can simply use bootstrap for it .Basic container , rows, col-xx-xx will do for it .
OK, this is a bit of a mouthful and very super specific. I will try my best to explain!
The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages. The image needs to maintain best fit, so if max width is required then it's used and vice versa.
Use Firefox version 33 (or a few earlier versions) to view this js fiddle to see it working properly:
http://jsfiddle.net/3vr9v2fL/1/
HTML:
<div id="imageviewer" >
<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img>
</div>
</div>
</div>
CSS:
#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}
#imageviewer{
position:relative;
width:100%;
height:100%;
}
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.centered {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
The Problem:
I originally found my code here on stackoverflow and made a simple mod adding max-height/width to the .centered class. At the time, this worked in all major browsers. The only exception being Opera.
Vertically align an image inside a div with responsive height
There is a big problem however: the latest version of Chrome (Version 38.0.2125.111) no longer works with this code and my users prefer chrome to other browsers by a large margin.
Any ideas on how to solve this? Is this a bug with Chrome? I'm open to javascript suggestions to make this work again.
I came up with this: JSFiddle - centered image keeps aspect ratio in resizable fluid container
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.image {
position: absolute;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
<div class='container'>
<img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>
The image stays centered both horizontally and vertically. If the window is scaled down the image shrinks respecting original aspect ratio.
I didn't test it on all browsers though.
Take a look at CSS object-fit property:
You may need a polyfill for older browsers, though.
View browser support for object-fit.
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'm making my first site and I'm having an issue with some buttons I've created. They are three divs within another div, and horizontally aligned. Here's the html:
<div class="buttons">
<div id="next-event"></div>
<div id="blog"></div>
<div id="about"></div>
</div>
Here's the CSS:
.buttons {
height: 200px;
}
#next-event, #about, #blog {
width: 155px;
padding-bottom: 30px;
}
#blog {
margin-right: 125px;
float: right;
height: 155px;
background: url(assets/blog.png) no-repeat;
}
#blog:hover {
background-position: -155px 0px;
}
#next-event {
margin-left: 125px;
float: left;
height: 155px;
background: url(assets/next-event.png) no-repeat;
}
#next-event:hover {
background-position: -155px 0px;
}
#about {
display: inline-block;
width: 95px;
height: 155px;
background: url(assets/about.png) no-repeat;
}
#about:hover {
background-position: -155px 0px;
}
I'm having problems when I resize the window in and out, as you can see at the site: http://madeitseries.com/
For scrolling in, how to I set it so the containing div for the yellow buttons gets longer only when the window is below a certain width?
And for scrolling out, how do I set it so the yellow buttons distribution only spreads to a certain point?
Thanks so much!
So to position the buttons, you could use a grid: http://youtu.be/0IrWRuEyXYA
Or you could use a media query to change the styles once the screen gets to a certain size so they don't overlap each other
Edit: Here's a link to the fiddle with the media query and it working properly as I imagine you want it to. I've removed the floats and margins, set the .buttons div to be the width of the buttons, set .buttons height to auto, and centred them using margin: 0 auto; http://jsfiddle.net/W6B2L/
#media screen and (max-width: 770px) {
#about {
display: block;
}
.buttons {
height: auto;
width: 185px;
margin: 0 auto;
}
#blog {
margin-right: 0px;
float: none;
}
#next-event {
margin-left: 0px;
float: none;
}
}
set the height of the buttons div to auto
if you want the buttons to resize according to the width of the screen, give them each a width of 33.33%.
Why can't you use css media query like below,
#media (max-width: 740px)
{
.buttons div
{
height: 100px !important;
width: 100px !important;
background-size: 200% !important;
padding: 0 !important;
}
}
Just copy this code into your css file.. when your webpage shrinks(resize) below 740px, then your images automatically resized as per the below code.. Like that you can customize your own codes for your desired screen resolution...
Note: Just use this code in your web page.. It might works.. And you need to customize for the hover state only..