Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Facebook page like button(not box) ruins the responsiveness of my website in mobile. Below is the code for the Facebook like button:
<div class="fb-like" data-href="https://www.facebook.com/myamazingfbpage" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
While the responsive structure is intact, there is a huge white space/block/section towards the right side of the viewport. Nothing is protruding from the website layout to force that white space/block/section. The buttons are in a left sidebar.
I have tried displaying it as inline-block, floated it to extreme left, reduced it's margin and padding to 0. Moreover, it also makes the twitter follow button next to it unclickable. I have also tried to <span> the <div>.
All to no avail.
Thanks my friends in advance. :)
It looks like you're using a WordPress plugin and that plugin's custom CSS is causing the issue. Not sure if you've set it up properly or just a bug with the plugin's CSS.
The culprit is this CSS selector:
.fb-like span {
overflow: visible!important;
width: 450px!important;
margin-right: -375px;
}
The selector above is targeting a <span> that is the immediate child of the <span> you posted in your question.
You'll notice in Dev Tools that your span is 75px wide even though the button has been given a specific width of 49px. That is due to the selector above. The selector above tells it to be 450px wide then essentially subtracts 375px via a negative margin, leaving you with 75px which creates the extra space on the right side as the button is only 49px.
To fix the issue you'll either need to:
Reference any docs that might be available for that WordPress plugin to ensure that you have configured it properly.
Remove the selector if possible.
Override the selector if you cannot remove it.
WordPress Plugin in question: Easy Social Share Buttons
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 11 months ago.
Improve this question
I've been working upon a Personal Portfolio for a few days now. I originally made it for my freeCodeCamp certification. But, now I wish to expand it however I've been facing a strange issue with the page where part of the body goes off-screen. I've tried resizing and removing the height of various elements and changed their display and position properties. But it's not working. I mean, it's not the biggest problem since all text and images are visible but still it's annoying.
I've hosted it through Github Pages here is the link:
brainstormed.github.io
It would be of great help if someone could point out what I'm doing wrong.
Thanks!!
The fixed padding of 40px on projectTile CSS class is causing the issue. On small screens the horizontal space is already filled by the image width: 80vw; padding: 10px; margin: 20px. You can either remove that padding or use a media query to remove it on small screen sizes.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am facing problem with overlapping div.
Please refer site my site : http://ayurved-infertility.in/index.html
As you can see in the site, top menu and left menu is inside div which is in absolute position and moving with the screen. And content is just behind the absolute div. Also I given background as transparent. so, we can see the behind text easily.
Now, my problem is if I put any hyperlink to the text that is just behind the absolute div, no-one can be able to click on the link because absolute div is overlapping.
So, how can I overcome from this problem ? If it is not possible then please suggest me a better way so, that my website look and functionality doesn't change and I can be able to click on hyperlink in the text.
First of all you could remove the height:500px of the element shown in the screenshot. Now you can click part of the text (green area).
After that you can either remove the left nav and be done with it.
Or place it outside of the table element and give it a fixed position. This is the quickest and easiest solution I can come up with.
In general you shouldn't be using this table method of positioning stuff on a website at all.
Your floating/absolute divs should only be as wide as your left menu item
The DIV surrounding your DL (the menu) should be
width:140px;
position:absolute;
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've been trying several solutions, but the clickable areas for links in my navigation sidebar aren't where they should be. I'm just looking to get the entire div or even just the text inside to be a link.
http://prelude2cinematestsite.weebly.com/
If you hover at the very top of "home" you'll finally locate one of the links. One of the solutions I attempted very early seemed to finally fix the problem, but then caused the entire sidebar to have scroll for width and push the social media icons down passed the bottom of the screen where they refused to budge. Unfortunately I can't seem to find this solution anymore since it's the only one that actually did what I wanted even if it broke a lot of other things.
There was originally supposed to be drop down menus, but even taking them out didn't seem to help.
And this isn't a problem with Weebly, I've checked that.
You do not need to apply position:absolute to the .sidebar-nav div and the #social div. Make them position: relative. They will automatically fall one below the other just as you need them. Then, remove the excessive padding that you've used on the divs to re-position them.
Currently, since the two are positioned absolutely, the social div is overlapping on top of the .sidebar-nav div and inadvertently preventing you from clicking on the buttons.
Adding a negative z-index to #social in your css file will solve your immediate problem but it looks like you may still have to work on the mobile version of your navigation.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For a school deliverable I need to make a horizontal bar graph with a description for each bar. This is the first HTML/CSS thing I'm making after completing the codecadamy courses. I've been able to figure out everything so far by looking at stuff on codepen, w3schools, stackoverflow, etc. But this last part is kicking my ass and I can't figure it out.
I have two lay-outs:
the graph and description next to each other for screens wider than 1240px,
the graph and description under each other for narrower screens
I did this by making two columns in Bootstrap and giving the container two fixed sizes. This works great on screens wider than 992 pixels, but on screens smaller than this the links don't work anymore. Some detective work with the Chrome Developer Tools shows that this coincides with a float:left that's enabled by #media (min-width:992px) in the bootstrap.css. Disabling the float on wider screens breaks the links again, but enabling it narrow screens doesn't fix them, so I'm not sure how that relates.
Here's the page: http://tijmen.kervers.nl/B1.2/competencies.html
And I think these are the questions I need to ask:
Why do the links only work when float:left is enabled?
If I failed to provide necessary information please let me know, thanks in advance!
Add a clearfix on your first #bars with Bootstrap's class clearfix, and it's clickable again.
To understand this :
Without clearfix, your block #bars has no height, and the second .col-md-6 overlaps it. The links are thus unclickable :
With clearfix, your block #bars clears the float of the second col, and has its height defined by its content. Thus, its content is brought back to front, and clickable :
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to solve this problem in Internet Explorer 8.
I have two div tags whose content should be shown on the same line. I know I can easily achieve this by using inline-block. However, I also want that, if the browser window is reduced to the point where the content doesn't fit in a line anymore, the content of the second div is moved on the line below.
Basically I'm looking for a behaviour of the kind "show both items on the same line if there is enough space, otherwise go to the next one".
Is there any way to achieve this with IE8? Even a Javascript solution is fine.
Try using style="float:left" on both divs. You may need to wrap both of them in another div to get the effect you're looking for.
You can use a media query to check the width of the screen and change the styling based on that:
#media(min-width:768px) { //div style here }
Check it out here:
http://jsfiddle.net/b9ahqnt0/
as well as float left try adding a percentage as a width so when the size of the screen is reduced it can adjust. Although normally when it comes to responsive sites you are better setting it up then adjust the issues as Daniel said using #media conditions to change the layout as the screen changes to what you need it to look like..