I'm not very knowledgeable on the subject, so I beg your pardon if this is very basic.
I have a website at lolhehehe.com and whenever a user clicks on the Facebook like button at the bottom of every post the Facebook box won't show completely.
Is this an CSS issue? How can I solve it?
Thanks a lot guys
Add this to the end of your stylesheet:
body .fb_iframe_widget iframe {
max-width: none;
z-index: 2;
}
The button is an iframe and your theme was preventing the frame from growing. I added the z-index because other elements were overlapping without it.
Due to the positioning of your button, it may flow off the screen sometimes anyway. You may want to consider adjusting its position as well.
Related
Im trying to remove the scrollbar over at https://cardmart.com.au. If you click on "contact" it loads a form within an iframe and I cant for the life of me figure out how to remove that scroll bar.
I looked at solutions in this thread - HTML iframe - disable scroll
But its not working on my situation or I am implementing it wrong.
Any help much appreciated.
It seems that the scroll isn't on the iframe, it is on the body of the iframe. I was playing around with the Google Developer tools, and found that if you add overflow: hidden; to your iframe, it doesn't work. You'll have to go to the page that is being represented in the iframe and add this style to the body of that page:
body {
overflow: hidden;
/* Other code */
}
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
I had a problem with share buttons being cut off at the bottom on my site and have fixed using this helpful post:
Bottoms of share and other buttons cut off
Now I am trying to to do the same for the little button bubble that shows the counter next to the share button.
Originally had this problem:
Now I have fixed the buttons but the bubble counter is still the same, but not all of them as you can see from image:
Not sure what CSS I need to fix. I tried using inspect element from right clicking using browser but not sure what code to rework.
Many thanks for any helpful tips to get me on my way.
Andrew
Try adding:
.stButton .stButton_gradient
{
height: 22px;
}
This is what I get under Chrome on Windows:
I'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
This is what I am trying to achieve:
This is what I get:
Please view the JSFiddle of this with web-kit browser (Chrome or Safari): http://jsfiddle.net/KqEqN/
This is happening when you narrow the screen but there's still visibly enough space for the button.
I've looked into CSS trying to find some sort of padding to the right of the button but couldn't. Also where the hell that horizontal line comes from?
I'm not familiar with jQuery Mobile, so I might be doing this wrong. My guess is that you must add extra classes instead of overriding jQuery Mobile's theme.
The fix involves:
.ui-input-search {
width: 50px;
display: inline-block;
}
Check it in action here: http://jsfiddle.net/NqFhQ/