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;
}
}
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;
}
Good Day...
Please take a look at my site here...
www.compumodsa.com
(still working on a lot of things there :P)
I am using a copy of Protostar that I am editing to what I want it to look like.
Basically I just want the mid position, witch has the FB inbedded wider and the 2 positions on the side narrower.
I have switched my template from statick to fluid and the side positions are way to wide for me.
I have gone through my template CSS and Index file but it dose not want to change.
I have looked for settings in the template but cant find any, or the correct one.
Where do i have to edit what to do this?
You can override the default CSS widths for the fluid layout by creating a custom CSS file as per: https://joomla.stackexchange.com/a/15597/120 and add some CSS to override the default settings.
Here's an example. Remember that span3 + margin + span 6 + margin + spam3 should equal 100%:
.row-fluid .span3 {
width: 20% !important;
}
.row-fluid .span6 {
width: 56% !important;
}
.row-fluid [class*="span"] {
margin-left: 2% !important;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0 !important;
}
Try this for centering this main layout:
<main id="content" role="main" class="span6" style="
text-align: center;">
</main>
Or you can change in css using class
.span6{
text-align:center;
}
I would like to have a div, that is centered in its parent, but children inside of it would be left aligned. Wanting this, I obtained the following:
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
<div class="centered">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
http://jsfiddle.net/SbPRg/ (source: Having the floating children elements determine parent width).
The problem is that when you resize the page, there still is a problem whereas the main "red" div is wider than what I want, and shows a big part of red instead of resizing to a smaller container that 'fits' its children.
Would you have any idea of how to obtain something like this, without javascript ?
The main idea is to display a "gallery" of images, in a responsive way (if the screen is too small, display one image per row, up until three per row if the screen is wide).
Just add CSS Media Query rules. Add the following rule to your CSS.
CSS
#media screen and (max-width: 337px) {
.child
{
float:none;
text-align:center;
display:block;
}
}
Working : Demo
Note: CSS Media Query is use to effect the styling to your HTML based on screen width's and height's
Here in your example i have added media query rule which gives style to .child class when the screen width reaches the 337px .
There could be max-width or min-width for width's similar for heights.
What is max-width: Here i have given it 337px, so it says that the css inside the rule should apply only when screen width is <=337px. If screen width is >337px then it would not apply the css within that rule.
Just set the Container width to the exact width you want (in the JSFidlle: you need to add width:300px;)
and when you resize the window nothing happen.
to make it responsive use:
#media screen and (max-width:480px)
and set the width of the container for every screen size(or for the three block and for two then for just one)
You could try a media query like this:
#media screen and (max-width: 350px) {
.container {width: 100px;}
}
Check the demo
The reason that the parent container "shows a big part of red instead of resizing to a smaller container that 'fits' its children" is that you've explicitly given it ten pixels of padding on all sides. Remove that padding from .container, and the div will shrink to the width of its children.
I guess you want something like this.
Use media query to apply relevant css to the elements based on the various screen sizes.
Here is the css you need to add:
#media only screen and (max-width: 350px) {
.child {
clear:both;
}
}
One alternative would be to use a framework like Bootstrap, which is good enough for making responsive webpages.
Here are the links you can refer to:
Media query reference.
Bootstrap.
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.
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;
}
}