Horizontal Shif of Facebook button in floating bar under Firefox - html

I have a floating bar that contains 5 social buttons. Only the Facebook button is shifting about 20 pixels in the left.
In the tens of CSS elements of the button under elements inspector, when I deactivate the position: absolute; of the code below, the button goes to its normal place. But I am not sure if it is the appropriate solution since it can affect the beahviour in other browsers.
.fb_iframe_widget iframe {
position: absolute;
}
Do you have an idea about this problem? Your help is appreciated.

You can try adding this to your CSS:
.fb_iframe_widget iframe {
position: relative !important;
}
That should fix it.
I also got this problem today. It seems that Facebook recently made a change to the Like buttons.
I'm adding this code to all my sites with Fb Like buttons now.

Related

Fixed menu link on iOS 15 only working after scrolling down

I have what seems to be a simple issue with a website on iOS (testing on my up to date iPhone 13), but I just can't seem to find a fix that works. Starting to pull my hair out as it seems to be a bug rather than an actual issue with how I'm laying out the page.
The website has a very simple header that is fixed in position, which contains an absolutely positioned menu button on the right hand side. (Edit: just to clarify that the button triggers javascript to open a full height menu div that covers the left side of the window. All this part of the functionality works correctly, it's just that tapping on the button to open this navigation box does nothing until I scroll down)
On desktop using Chrome dev tools everything works fine at all browser sizes.
However, on iOS when loading the page the button is not clickable. If I scroll down slightly suddenly I can use it. Scroll back to the top and I can't use it anymore. This happens even if I remove all other content from the header leaving nothing but the menu button. I've tried everything I can think of but just can't get this button to work when the page hasn't been scrolled.
It seems like an issue of something covering the button, but there is nothing. Even with the header otherwise completely empty I get the same issue, and the content clearly can't be covering it as it visibly scrolls behind the header.
This is the css/html which I believe to be relevant: (#page contains the rest of the document and is padded to clear the fixed header. I have also tried removing the padding and using an extra div to push the content down as well just in case padding on a top level element was messing with things). ui-container is used to limit the width on large screens and simply has width:100% on smaller devices.
#top {
position: fixed;
width: 100%;
z-index: 10;
}
#header {
background-color: #fff;
padding: 20px 0;
}
#mobile-nav-btn {
display: block;
position: absolute;
top: 24px;
right: 20px;
font-size: 22px;
cursor: pointer;
}
#page {
padding-top: 113px;
}
<body>
<div id="top">
<header>
<div class="ui-container">
<a id="mobile-nav-btn"><i class="fas fa-bars"></i></a>
</div>
</header>
</div>
<div id="page">
... content ...
</div>
</body>
Please use:
<button onclick=“window.scrollTo(0, 500)”></button>
Well it looks like it was the menu itself causing the problem as it was hidden using opacity and moved to top: -100% to get it out of the way. Seems that iOS messes around with the document height and this causes problems in some instances.
This may be specific to devices that have a rounded display, or may also affect all iOS devices as I know that the fact the address bar & navigation buttons auto shrink/hide on scroll can also play havoc with positioning.

Align Iframe with buttons

I´m trying to align an iframe with the social buttons.
This is my website:
http://kickads.mobi/test/spotify/
The thing is that I want to put the buttons right down the iframe, leaving the Spotify preview in a line and the buttons in another, but I don´t know how. I have tried with aboslute position and floating, but it wouldn´t work.
I want to put the three buttons in a line after the iframe.
How can I do it?
I have separated the buttons and the iframe in different divs.
Can you help me?
The following CSS styling on the social div could achieve what I think you're asking for:
#social {
position: absolute;
bottom: 0;
min-height: 190px;
}
It will give you this output:

Clickable area on button is too small

So I was experimenting with a new type of button, using a tutorial I cannot find now...and the end product WORKS but the clickable area on the button is extremely frustrating, small. I've tried editing the css since I think this is just a css issue but I cannot get it to work. Because of the small clickable area it seems to not work on a mobile device.
The website in question is http://forrestburdette.com/
The button in question is the top right button for their Children's Outreach Ministries. It seems to only be clickable on the far right middle of the button. I need some guidance on where I went wrong! Hoping this is an easy fix!!!
Currently the button is underneath the header which is why the link is being cut off. To solve this you need to add a z-index to the div containing the button, like so:
.forrest_burdette_childrens_outreach_button {
position: absolute;
top: -9px;
right: -1px;
width: 220px;
height: 52px;
z-index: 1; /* add z-index */
}
This will bring the button above the header, allowing the full width of the link to be clickable

Position:fixed solves IOS overflow:scroll issue but causes body to jump to top?

I have a class js-drawer-open that gets applied to the body & html when a drawer is triggered to open.
.js-drawer-open {
overflow: hidden;
}
This works perfectly on desktop to prevent content outside the drawer from scrolling when the drawer is open. However on IOS this doesn't work as the element inside the body are position:absolute. The only way I could get it to work was with the following...
.js-drawer-open {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
But now my issue is if you scroll down the page and then open the drawer the page jumps back to the top of the screen which can be very frustrating for the user.
I think this is due to position: fixed being applied and I wanted to know if there is any way around this?
Any help would be much appreciated.
Maybe I'm missing something as you don't have a fiddle, but it sounds like your click event causes the jump to the top of your page. Take a look at: How to prevent a click on a '#' link from jumping to top of page in jQuery

create vertical strip in HTML or CSS

I am absolutely beginner in HTML and CSS.
What I would like to do is to create a strip in the left hand side of a webpage, similar to this:
https://www.inside.com/all
The strip has a number of clickable icons, and when one slides down the page, the strip and logos stay at the same location.
Is there any way to look at the page source and find out how it is implemented?
If not, I appreciate any help on how to go about this.
The key is using position: fixed; and height: 100%;.
CSS code
.verticalStrip {
position: fixed;
top: 0;
left: 0;
width: 200px;
background-color: grey;
height:100%;
}
.content {
padding-left: 250px;
}
HTML Code
<div class="content"> content of the page....</div>
working demo: http://jsfiddle.net/h85er/
If you're using a modern browser such as Chrome, Firefox, or even newer versions of IE, there's an inspector tool you can use. In chrome, just right click any part of the page you want to see the source for and click Inspect Element.
Otherwise, most browsers will allow you to view the page source. Often, it's a simple right click, or an option somewhere in the toolbar.
That navbar can be easily recreated by using a div element at a fixed position at the left side of the screen position:fixed;left:0;top:0;. Then, a list (ul) can be used for individual navigation elements. Naturally, you'll want to use list-style: none; to remove those ugly bullet points.
EDIT: JSfiddle available here