I have been searching all over the internet how to fix this. Basically I need the button on the right side on desktop view. See below:
chrome view
But when you resize it or viewed on mobile devices, it should be in full width but I cannot do it. see below:
mobile view
This is a sticky or scrolling menu as well. Here are my codes:
/* call button small*/
.buttonfloat-small{
position:fixed;
bottom:0px;
text-align:center;
z-index: 99;
display:block;
width:100%;
margin: auto;
}
Thank you!
You can do this by using:
.buttonfloat-small div a.fl-button {width:100%}
.buttonfloat-small div {margin:0!important}
OR by directly targeting the nodes:
a.fl-button {width:100%}
.fl-node-5907a486bf15a > .fl-module-content {margin:0}
Which will make it look like this: https://i.stack.imgur.com/epv0B.png
Side Note: The important override on the first div is to remove the 20px right margin from the ".fl-node-5907a486bf15a > .fl-module-content". Calling on it directly doesn't require the important tag (hence both examples).
This has to be put into your Media Queries to make it only appear full width when resized, like:
#media (max-width: 768px){
.buttonfloat-small div a.fl-button {width:100%}
.buttonfloat-small div {margin:0!important}
}
Changing the text to change from Call Us On to Call Now, I'd personally do with JQuery like this:
$(document).ready(function() {
var button = $(".buttonfloat-small div a.fl-button span.fl-button-text"),
resize = function() {
if (window.matchMedia('(max-width:767px)').matches) {
button.html("Call Now 0330 838 1828");
} else {
button.html("Call Us On 0330 838 1828");
}
};
$(window).resize(resize);
resize();
});
This will check if the width it 767 and if so then it will show Call Now, else it will show Call us and will also change when the window is resized.
Here's a JSFiddle showing the effects: https://jsfiddle.net/awwy5ram/1/
Let me know if you require more assistance!
Related
PROBLEM:
I'm currently working on a from-pdf template; I'm relatively new to responsive design and am having an issue with the following: I have a button at the bottom of the page that I'm currently centering using a set margin-left value. However doing so prevents that button from 'floating' all the way to the left during screen re-size.
GOAL:
Have a solution that allows the button to be horizontally centered during 'full size' browser, but collapse and float all the way to the left when the browser size is decreased.
TRIED:
Setting padding/margin
Setting both of the above to auto
Thought about a horrible conceptual ghetto hack (I could technically make the image a long white rectangle with the button centered then make the image fluid, thus re-sizable)
WEBSITE IN QUESTION (OBJECT: ORANGE BUTTON NEAR FOOTER):
http://thedma.org/the-state-of-data/
Here you have a working fiddle
The trick is:
a {
display: block;
text-align: center;
}
img {
max-width: 100%;
}
assuming that a selects the link corresponding to the button and img is your image.
You want to use media queries for this. Specifically viewport-height or viewport-width from the sounds of things.
Link to documentation.
Basic idea:
#media (max-height: 600px) {
.bottom-button {
/* styles */
}
}
#media (min-height: 600px) {
.bottom-button {
/* different styles */
}
}
http://www.bootply.com/tfGjhlJnPL
I'm trying to get the right-aligned navigation items to align vertically with the bottom of the left-aligned image.
I also want the navbar toggle button to line up with the bottom of the image in the same way when the navbar is collapsed...
Any suggestions welcome :)
Well, if you're not adverse to it, this can be achieved using primarily position:absolute. For example, based on the current styles you have, this CSS would work:
.navbar-header{
position:relative;
}
#media (max-width: 991px) {
.navbar-toggle{
position:absolute;
right:0;
bottom:0;
}
}
#media (min-width: 991px) {
.navbar-nav{
position:absolute;
right:0;
bottom:0;
}
}
Here's an updated Bootply to show you what this achieves. Depending on your preference, you may also want to adjust each element's padding or margin to alter just how close it is to the bottom of the header area (I did not change these styles in my demo). Hope this helps! Let me know if you have any questions.
I've created a few sites with facebook like button in the footer.
However, the popup that appears after you like a page, is not visible, so I'd like to move it over the like button.
So that this wouldn't happen.
How could I target the html5 implemented like button?
<div class="fb-like span6" data-href="https://www.facebook.com/pages/xxxxxx?fref=ts" data-send="true" data-width="450" data-show-faces="false" data-action="like" data-font="segoe ui"></div>
And what css would I need to apply to it?
Unfortunately you can't really get the popup to move independently of the button, because once the button is clicked it opens the widget in an iframe and you won't be able to affect the contents of the iframe with out playing with the same origin policy. Apparently there are Ways to circumvent the same-origin policy but its probably way more of a headache than it's really worth for something like this.
However, if you just want the iframe opening above the edge of the window you could move the iframe around like this:
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff; /* in your case you may want to add a white background */
}
Also you'll need to remove overflow:hidden from #footer.
You should end up with this:
I know it's not ideal, but given Facebook's lack of interest in being particularly developer friendly it is likely as close as you can get to what you're after.
Update:
Wrap the whole widget in a div and position the div where you had it to begin with. Then you can you use the following CSS to position the iframe.
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:10px;
}
#media (min-width:1200px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:-45px;
}
}
#media (max-width:979px) and (min-width: 768px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:110px;
}
}
#media (max-width:767px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:0px;
}
}
a) you should change your footer's height, it won't affect much your design, even your responsive options, it could be like this:
#footer {
margin-left: 0;
height: 230px;
background: #fff;
border-top: 1px solid whiteSmoke;
}
or...
b) you can put the like button in your side bar without changing any css, i will look something like this:
http://puu.sh/3Srmq.png
I have a compromise solution too.
After user clicked the like button, scroll window untill widget totally shows up by callback function.
Code looks like
FB.Event.subscribe('edge.create', function(response) {
$('html, body').animate({
scrollTop : $("#yourFacebookWidgetID").offset().top + 170 //add offset.
}, 10);
});
Here is the fiddle.(I borrowed this instance, Somebody made it long time ago.)
Here is the screenshots.
After clicked the like button, just before auto scroll.
And this is the screen after auto scrolling finished.
Please notice the last like button.
Edited : add the 170px offset .
Add screenshots.
That's what worked out for me.
.wrap-parent {
zoom: 1; //or your clearfix class
}
.wrap {
overflow: visible;
}
The html will be something like
<div class='wrap-parent>
<div class='wrap'>
<!-- button here -->
</div>
</div>
The default height of navbar in Twitter-Bootstrap is too small. When height is increased, it encroaches the divs below.
How can I increase the height of the navbar that slides the entire page down? If this is possible, how to place navbar links to top / bottom of the navbar.
I'm pretty sure I don't love this solution but it works for the amount of time I have to spend on this.
.navbar .container { height: 2em; }
I had to also add some padding-top in the same selector to get things inside the navbar to vertically align nicely.
edit: I just re-read your question and saw you're having trouble with the "divs below". In doing this you need to adjust padding on the body tag as well, e.g.
body { padding-top: 6em; }
per the Twitter Bootstrap docs on Navbar:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of apdding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
Adding a padding like that is not enough if you're using responsive
bootstrap. In this case when you resize your window you'll get a gap
between top of the page and navbar. A proper solution looks like this:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Source:
Twitter Bootstrap - top nav bar blocking top content of the page
you can try this one. it works in any size of display.
.navbar .container { min-height: 83px; }
.navbar-fixed-top {
position:static;
margin-bottom:20px;
}
</script>
$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});
</script>
This solved a similar problem of mine, (The sub menus was not appearing because of the small parent ul height, on the first click) maybe it works for you as well.
I have a background image centered that Chrome displays offset by one pixel.
CSS
#container {
background: url("images/header.jpg") no-repeat scroll 50% transparent;
width: 100%
}
#header {
width: 986px;
margin: 100px auto 0 auto;
}
HTML
<html>
<body>
<div id="container">
<div id="header">centered content</div>
</div>
</body>
</html>
I guess it has to do with how different browsers handle the center -or 50%- property of the background in CSS:
Is there a known (simple) hack or alternative method to fix this? Background container has to be 100% wide.
If you can output your image wider than the browser window, that should fix it.
If found that solution here - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/
For me, this did the trick:
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
I will post the link for this solution as soon as I find were I got it from a few days ago.
In the same post, the guy said the problem was with odd or even number for container width.
Anyway, this fixed the problem in my case.
If you make the background image width an odd number (987px) the positioning will be consistent across all browsers. It seems counter-intuitive but that seems to always fix the issue for me without any CSS hacks.
Is the image actually 986px? The easiest way I found to fix it is to make sure the width of the image is an even number.
Another thing you could do is add a 2px buffer (to keep the width an even number) in the background image to account for that shift. It shouldn't shift your image as viewed in the browser as long as you add a px to each side to keep it all even.
Try resizing the browser to see how it works... we are talking about pixels here, and if the window has a even width it's ok, otherwise a pixel has to be lost somewhere i guess.
I suppose the backgroud image is also 986 pixels wide? Then this effect should also be visible on the left side, turned around though.
I suggest to remove the background image from the container and add it to the header:
#container {
width: 100%;
}
#header {
width: 986px;
background: url("images/header.jpg") no-repeat scroll 50% transparent;
margin: 100px auto 0 auto;
}
I used the following bit of CSS to fix the problem on webkit. If JS isn't enabled, it works on the assumption that the browser will probably be full screen, so the viewport width on webkit will be an odd number
CSS
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
html.evenWidth {
margin-left: 0px;
}
}
JavaScript (jquery)
$(document).ready(function {
var oWindow = $(window),
htmlEl = $('html');
function window_width() {
if(oWindow.width() % 2 == 0) {
htmlEl.addClass('evenWidth');
} else {
htmlEl.removeClass('evenWidth');
}
}
$(document).ready(function(){
window_width();
$(window).resize(window_width);
});