I've integrated the facebook login in a site which seems to be the source of some trouble.
Whenever I log in with the 'regular way' (by an self created field) there is no problem, but once I use a facebook login the divs of the site are getting messed up.
I've got a wrapper with a width of 90% of the page, inside this div there are two divs one named content with 80% of the width of the wrapper and the other once receives the other 20% of the width.
<div id="wrapper">
<div id="content">
content here...
</div>
<div id="sidebar">
side bar items etc.
</div>
</div>
Now if I press F12 to check the source / inspect elements of the site it shows up perfectly
with the regular login. However once I login with facebook the following pops up:
<div id="wrapper">
<div id="content">
content here...
<div id="sidebar">
side bar items etc.
</div>
</div>
</div>
Is this caused by the facebook plugin loading, whilst php/html is not waiting to generate any content and just continues? I am 100% sure this is caused by the login as I excluded any other option.
Perhaps you could add an element which would hold/wrap arround the Facebook login with fixed dimensions(width/height) and the css property overflow:hidden
Related
Im trying to make my sidebar content follow the scrolling but stop at the footer. Currently, any content i place goes too far and overlaps the footer.
<div class="row row-no-padding">
<div class="col-lg-8">
Content is here.
</div>
<div class="col-lg-4">
Sidebar content would be here. I want all content here to follow my scrolling
but stop if if i go too far(stop at the footer).
</div>
</div>
Please help me with this. I know this is a minimalist example but i've tried so many combinations at this point that i dont know what the hell to write.
I've tried position:fixed but it makes the content overlap the footer. position:sticky doesnt do anything, or im not using it properly.
I am creating a responsive one page portfolio that has About, Skills, Work and Contact sections. I am coding from scratch using HTML and CSS alone. To navigate to each section up on clicking the links on the navbar, I have used the following lines of code:
<div class="about">
About
</div>
<div class="skills">
Interests
</div>
<div class="work">
Work
</div>
<div class="contact">
Contact
</div>
When I resize the window below 650px, I am unable to navigate to the individual sections correctly. Like for instance when I click on About, the page goes to the bottom of About and so on.
How do I rectify this without using Bootstrap or any jQuery?
The screen shots of the problem are attached below:
Screen shot of the page while clicking on About:
Screen shot of the page while clicking on Work:
PS:
I also tried increasing the padding-top and padding-bottom below the 650px break point to achieve the result (to display the sections correctly up on clicking). But on doing so, there is a lot of empty space.
hello use this JQuery code
$(".nav").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
in navigation panel
About
and section or div id
<section id="about">....content of this section... </section>
So I have a parallax scrolling web page you can see it here I would like to be able to have a link my blog which obviously is not on the same page because its not a regular style web page. I have gotten the ribbon/banner to show up on a page that is not like my web page, you can see it here. I'm simply using a div to show it.
<div class="wrapper">
<div class="ribbonw"><div class="ribbon"><a href="google.com">Visit my blog </div>
</div>
</div>
How would I add it to the web page with out screwing up the page. I have done some research on how to make the banner, but I'm not sure how to add it to the page because when ever I do it just either doesn't show up on the page or is just a long white strip on the page.
So to summerize up what I'm asking is how do I add a banner like the one on the second link to my page I would like it to look something like the banner on this page.
To answer the question for future users what I had to do was add the code above into the actual first "slide" or first div. What I mean by that is that in a parallax scrolling page you have your pages split up into divs. So i just had to add my banner into the first div. It looks something like this:
<!-- begin slide 1 -->
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="wrapperr">
<div class="ribbonw">
<div class="ribbon">
Visit my blog
</div>
</div>
</div>
more content here
</div>
<!-- end slide 1 -->
as you can see I just had to add the content into the slide. I had it outside before therefore creating another slide.
I am working on converting a twitter bootstrap theme into a wordpress theme and adding onto it.
I am having issues adding full width items into the theme. I have tried adding a slider plugin that is set to full width. Although when it is added it goes to a fixed width, the same happens if I add an image aswell. It seems all of the content in my page does this except for my header and footer.
Also it seems every time I add in anything to the page the page/footer gets messed up. I am still learning css though.
I am posting a link to the site to see if anyone can take a look and give me a hand.
http://goo.gl/8JUDA
It looks like you contained the element that you want to stretch the size of the window within a .container div.
.container is used in bootstrap for fixed layouts. Instead try using the .container-fluid class.
For example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
Read more: http://twitter.github.io/bootstrap/scaffolding.html#layouts
I'm making a login page with Twitter's Bootstrap, and I have a problem. I can't get a thumbnail to display where I want it to. You can see here: http://metamint.net/login
I want to put a thumbnail in the blank space next to the forms, but it won't work correctly; the forms are pushed down or moved off to the side. How can I do this correctly? Thanks.
Couple of problems.
You put the thumbnail in a row, so it's going to clear all floats.
You put the thumbnail first, which doesn't flow well with how bootstrap is set up.
Try something like this:
<div class="row">
<div class="span4">
.... form content here
</div>
<div class="span4">
.... thumbnail content here
</div>
</div>