Please keep in mind that I am still learning HTML/CSS.
I have been working on a website for a client and have reached the point of being finished, however the footer is driving me insane!
I need two columns of text to follow the flow of the website, but no matter what I try the left column is stuck to the very end of the page and I cant move it to the center where the other column currently sits.
The website is http://www.eplsdesign.com/Grow/index.php
Thanks in advance
Hi now you write to in your html <div id="wrapper"> now it's change into <div class="wrapper">
Now just now replace to this
<div id="footer">
<div id="wrapper">
into this
<div id="footer">
<div class="wrapper">
Related
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
Im building a WordPress theme based on fullPage.js Im allmost finishing it. But I have encountered a problem that I cant figure it out.
In the next two examples there is a navigation bar, a first section containing slides and other sections below:
Here http://wordpress-123465.sae1.nitrousbox.com/azal/ scrolling down from the first section that contains slides is smooth and the corresponding link in the navigation bar works (when click scroll up to the slider section)
But here http://wordpress-123465.sae1.nitrousbox.com/azal-beta/ scrolling down is very dificult, also the keyboard doesnt work, after that is imposible to scroll up again, and the navigation bar doesnt work neither.
In both cases pointer in the right side of the screen work.
What could be wrong? Thanks
Your site contains only one section as a first child of the fullpage.js container.
You probably forgot to close some HTML tags and now you have many sections inside the 1st section.
Which is not the way fullpage.js works.
Fullpage.js requieres this structure:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
And now you have something like:
<div id="fullpage">
<div class="section">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
</div>
You should first try to fix HTML errors in your source code.
line 138, you closed </head>, it's ok. But you started a <nav> tag just after, without opening a <body> (which is opened at line 191). This is an error. Nav must be inside body tag
line 234 and 236, opening " character for style attribute is missing:
<div style=height:12px;">
Many div tags are not in the right place. Don't forget you can't do this:
<div>
<p>
</div>
</p>
instead, you must do this:
<div>
<p>
</p>
</div>
As a good starting point, use a HTML validator to check if your source is correct: http://validator.w3.org/check?uri=http%3A%2F%2Fwordpress-123465.sae1.nitrousbox.com%2Fazal%2F%23SliderTitle%2F2&charset=%28detect+automatically%29&doctype=Inline&group=0
This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!
So I'm currently developing my resume website with bootstrap and am having a bit of trouble with getting my rows to mesh and display right.
I know why the problem is occurring (my education module is extending the height of the row too far), but I'm not sure how to fix it.
As of now, I have two rows: the top row is my Skills and Education row, while the bottom is my experience and a blank module.
I've tried nesting rows (maybe I didn't implement it correctly?), as well as messing with fluidity, responsiveness, etc.
Is it something easy that I'm just overthinking?
http://i.imgur.com/U5DIZ1M.jpg
Add this in your CSS code
#education{
float: right;
}
You need to have two columns in a row, and then nest the two sections in the left column.
Fiddle
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<!--Skills-->
</div>
<div class="row-fluid">
<!--Experience-->
</div>
</div>
<div class="span4">
<!--Education-->
</div>
</div>
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>