i am trying to create a CSS Footer with this CSS:
.footer {
width:100%;
background:#666666;
clear:both;
color:#FFFFFF;
}
.footer-container {
display:inline-block;
width:80%;
margin: 0 auto 0 auto;
}
.social_links {
float:left;
list-style:none;
display:inline;
}
.footer_text {
text-align:center;
}
.footer_logo {
float:right;
}
i want 3 columns, the left one fairly small just for facebook and twitter social icons displayed next to each other (inline) the middle column for text so that one larger and then the right one just for a small logo
i am trying to make it responsive too so as the page gets smaller, it goes in order:- the left column (social links) / middle column (text - aligned center) / the logo down the bottom
here is a fiddle with what i currently have but i cannot get it working as above.
http://jsfiddle.net/eYwsm/1/
If you dont want the columns to be rows in mobile size this will do the trick:
http://jsfiddle.net/eYwsm/2/
.footer_text has overflow: hidden so it will take the remaining space between the floating elements.
I would use a media query (http://css-tricks.com/snippets/css/media-queries-for-standard-devices/) and have the elements display changed from inline to block at a certain width. For example, using this in your CSS
#media screen and (max-width: 480px)
{
.social_links, .footer_logo
{
display: block;
}
}
Related
I have three divs: a, b, and c. They are each 48% wide and displayed as inline blocks. This style will be applied to several pages. Div a will always be shorter than div b. This creates a gap between the bottom of a and the top of c. (Divs a and b will be slightly different heights on each page, but a will always be shorter. Because of the inconsistent heights, I don't feel I can reliably use margin-top:-10px for example.)
How it is:
How I want it:
edit
Mobile:
/edit
CSS
div {
width:48%;
box-sizing:border-box;
display:inline-block;
border:1px solid;
vertical-align:top;
}
#media only screen and (max-width: 600px) {
div {
width:100%;
}
}
HTML
<div style="border-color:red;">a<br>a</div>
<div style="border-color:green;">b<br>b<br>b<br>b<br>b<br>b<br>b<br>b</div>
<div style="border-color:blue;">c<br>c<br>c<br></div>
The media query allows the three divs will be stacked in one column on smaller screen sizes. That's why the divs need to be in this order.
A bit tricky due the dual layout. Keeping the same html layout you have it can be done with a selector for the elements and another for the "b" item (a class, or :nth-child(2) or ...) dealing with float and margin.
(change media with in the code snippet to check the layout change)
div{display:inline-block;width:48%;border:1px solid red;float:left;clear:left}
div.b{clear:none;float:right;margin-right:2%}
#media only screen and (max-width: 200px) {
div {
width:100%;float:none;clear:both;
}
div.b{margin-right:0;float:none;clear:both;}
}
<div class="a">a<br/>a<br/>a<br/>a</div>
<div class="b">b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/></div>
<div class="c">c<br/>c<br/>c<br/>c</div>
set the min-height to them all to be equal in length.
div {
width:48%;
min-height:300px;
box-sizing:border-box;
display:inline-block;
border:1px solid;
vertical-align:top;
}
I am working on a site but the centering of my images horizontally in the footer isn't going very well.
When you make the screen smaller then 620px or something like that, then I want to center the text. But also the images.. With the images I mean the 5 icons in the third table and the picture in the fourth table.
If you try to decrease the width of the screen you will see that the images are not perfect aside the text.
So my question is.. How can I center the images horizontally with the text together when the text is aligned in the center?
Here is my footer: https://jsfiddle.net/ThomasPereira/L7dz7d4b/
I think that my mistake is here under -->
#media screen and (max-width: 623px) {
#footer #group {
padding-left:0px;
max-width:100%;
}
#footer {
height:1150px;
}
#footer #group #button {
text-align:center;
}
}
UPDATED
I just edited your fiddle a bit and managed to achieve what you wanted
https://jsfiddle.net/L7dz7d4b/2/
#media screen and (max-width: 623px) {
#footer #group {
padding-left:0px;
max-width:100%;
}
#footer {
height:1150px;
}
#footer #group #button {
text-align:center;
}
#footer #group a #icon {
width: 20px;
height: 20px;
margin: 5px;
float:none;
}
.opmaak{
display:flex;
margin:0 auto;
width:100px;
}
}
Try to make images display:inline-block instead of float:left
Smth. like:
.opmaak a img {
display:inline-block;
vertical-align:-10px; /* value to nicely show img along text, */
}
P.S. You should have only unique ids. Use class instead of id if you have two elements with the same id.
Heres a simple guide
try to use classes rather than ids for things you need to use more than once. Using inline-block is very helpful, but keep in mind, things can get pretty messy if your css isn't good. For example, 2 inline-block elements will not align correctly if one has text, and the other doesn't.
Just some things to keep in mind.
So I'm trying to create a drop down menu with the select and options elements that displays when the device width gets small enough. My problem is I can't center the div that the select element is contained within for some reason (the div id is "navbar2"). It just hugs the left side of the screen. Can anyone see my mistake here?
#navbar2 {
display:none;
}
#media (max-width:380px) {
#navbar2 {
display:inline-block;
width:80%;
margin-left:auto;
margin-right:auto;
border:1px solid red;
}
#navbar2 select {
width:40%;
}
}
So I figured this out. Apparently the "auto" trick doesn't work on inline-block elements. So I switched the "display" to "display: block;" and it centered the div horizontally.
I am building a joomla 3 template so I have to use bootstrap 2. I am a bit new to BS and want to learn.
There are 4 sizes, and 3 of them are working well. I want the third smallest to go into each block being full size (like the smallest) but I am having problems getting things centered. I have used firebug to copy over the styles for row, span and container - but something is wrong.
the content is in a .span2 and I have this css
.row {
margin-left:0px;
}
.container {
background-color:#F0FA5A;
}
.span2 {
width:100%;
float:none;
margin-left:0;
display:block;
box-sizing:border-box;
}
here's a ss:
As you can see the container (yellow) is centered, but the content isn't.
So if I put the .row margin-left to -20px to pull it back the row becomes too wide thus:
If someone could suggest what I need to do please to get it right
I have also tried setting the container width to auto, with margins:auto - now its perfect, excep
You can see it at www.fct.ee-web.co.uk
thanks
In bootstrap.css you can see
[class*="span"]
value :
margin-left: 20 px;
you can edit it or override it with !importion;
put a margin-left:0 on the mainContent when have the proper size
#media (max-width: 979px) and (min-width: 768px) {
.mainContent {
margin-left:0px;
}
}
I have this problem after coding my index page. I have divided the page into 2 columns:
header
nav
content floating left, content floating right
footer
On my screen resolution I have it properly aligned:
Content left | Content right
But on a small screen, it looks like this:
Content left
Content right
This is the code:
<div id="contentleft">
text & content left
</div>
<div id="contentright">
text & content right
</div>
CSS:
#contentleft {
float:left;
margin-left:12%;}
#contentright {
float:right;
margin-right:12%;}
Help would be great appriciated
floats will wrap when there does not exist enough space for them. your css has the width set to auto expand to the content.
#contentleft {
float:left;
margin-left:12%;
width:38%; // note margins grow the width of divides
}
#contentright {
float:right;
margin-right:12%;
width:37%; // note on odd width screen some browsers IE rounds up so 100%/2 + 100%/2 = 101% according to microsoft.
}
One way to prevent the overlap is to place both divs in a #wrapper div and give the #wrapper a set width.
#wrapper{
width:400px;
}
#contentleft {
float:left;
width:120px;
margin-left:12%;
background:green;
}
#contentright {
float:left;
width:120px;
margin-left:12%;
background:red;
}
Example: http://jsfiddle.net/jasongennaro/b2eyx/1/
Fyi... I also floated them both left and changed the margins and added some color to make it easier to see.
And welcome to SO!
add width to your Divs and put it in % like 50%-50%.