I created a website for a friend: http://personaltrainerffm.de/
and the logos underneath (see pictures) won't be shown centered. Also when browsing with a mobile device, it will get screwed. Can you please help?
THANK YOU VERY MUCH in advance
Screenshot on smartphone
Those logo containers (.container-erfahr ul li) all have a float: left setting in their CSS. Since the second one is higher than the third one, the fourth one is positioned below the third one (i.e. right of the second one) in the mobile view - that's the way floats work.
To fix this and center them, erase the float:left and define them all as display: inline-block. To center the elements, add text-align: center to their container element .container-erfahr.
These are the changed rules:
.container-erfahr ul li {
display: inline-block;
margin: 30px;
padding: 0px;
border: 0px solid lightgray;
list-style: none;
}
.container-erfahr {
margin-top: 100px;
margin-left: 0px;
text-align: center;
}
Related
I want two dropdown menus, one below other, and then I need more stuff aligned below that as well (say a button below these two).
I thought to combine all of these in a div.
My DIV is classed as .filter-search
and both drop downs are classed as .drop
CSS code below.
.filter-search {
margin-left: 10%;
margin-right: 10%;
margin-top: 40px
}
.drop {
display: block;
margin: auto;
font-size: 18px;
padding: 12px 360px 12px 8px;
border: 2px solid black;
border-radius: 8px;
background-color: white;
}
My problem currently is that even though both drop downs (1 and 2) have the same text, even then the size of the dropdowns differs by a small fraction. i.e. they aren't aligned left and right.
I can make them same by setting the width as 50%, but I am trying to understand why it isn't working by itself (if all the CSS attributes of both select dropdowns are the same).
Also, I am wondering if I really need the outer div in this case?
Without debugging your page it is difficult to say exactly what the problem is.
I have created a JSFiddle with an example, where i think it works like you wanted: https://jsfiddle.net/zag8hsL3/1/
The important part is the
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
on the .selects wrapper div.
Let me know if this isn't exactly what you wanted, and we can change it... 😉
I am making a navbar. In this navbar I used two li tages. One is of language and another is of currency. When I make the screen size to extra small I want the litags to float left. But it goes down of another. How can I fixed this problem.
Also my collapse button is not positioning in correct place. Need a solution for that too.
I have tried with float-xs-leftclass and also css media query. None of them worked.
I want the "EN" and "USD" option to float left an extra small screen and I also want the search and total amount of money option to look cool
One way to achieve what you asked for is to use the CSS property display: flex on the parent element of the li tags (for instance, a ul tag) in conjunction with the flex-wrap: nowrap. Here is an example that might work on small screens:
nav {
width: 100%;
}
ul {
width: 100%;
list-style: none;
padding: .5em;
display: flex;
flex-wrap: nowrap;
background: slategrey;
}
li {
margin: .5em;
padding: 1em;
background: lightblue;
}
<nav>
<ul>
<li>Language: French</li>
<li>Currency: Euros €</li>
</ul>
<nav>
I'm trying to vertically center single and multi-worded links in a horizontal nav. The multi-worded links work fine but as you can see the single worded links float to the left. I tried adding a width to ul li a and ul li.colour but that changes the width of the div itself.
http://codepen.io/Compton/pen/ufGCI
You can try this, it's a bit hackish but it works:
ul li span {
display: inline-block;
vertical-align: middle;
height: 110px;
font-size:2em;
text-align: center;
padding: 0 20px;
line-height: 110px;
}
.doubleLine {
display: table-cell;
line-height: 1em;
}
The line-height on the span centers it vertically; you add the doubleLine class to spans with more than one line to revert them and keep them working like they were.
I'd like to see a neater solution than this, but again it works for now. You may have trouble down the line as the double line spans are only happening to look like they work, they won't always work for every combination of words. You can test this by changing one of the words to two characters, you'll see it doesn't actually center it.
I am trying to make a website responsive; I am almost done with it, except that when I make the window smaller, the nav links overlap the logo on the left. Look at it here
How do i make the nav bar move to under the logo when i re-size the window?
Thanks for any help
I had a play with your code and the first thing I spotted was the two #nav id's.
You should only have one unique id per page.
However, your main issue is the position fixed of the navigation items.
This is causing the nav to always just march on over the logo.
Position fixed ignores the document flow and places it wherever you put it.
You need to get the navigation back into the document flow
Change your nav items to relative and meddle with the top positioning.
You should place these in a new media query relating to your break points
You will also need to remove all those positioning styles.
That should get you half way there.
I would help more but I've just been given a rum and coke so best to stop now.
Steve
Either move the logo down, or create some space above it and put the links in said space.
You have to change many of the position attributes along with the float properties - I played around with the CSS on the site, and this is what I changed:
#topBar {
height: 300px;
}
.BODYcontainer {
margin-top: 300px;
}
.container .columns {
float: none;
}
.container .columns.logoBox {
left: 0;
position: relative;
display: block;
float: none;
margin-bottom: 50px;
}
#nav {
position: relative;
float: none;
top: 0;
left: 0;
right: 0;
text-align: center;
display: block;
}
#companyNav {
float: none;
position: relative;
top: 0;
}
I am using a template based off of Twitter Bootstrap for a site I'm building (here's the link: rwphoto), but I am having some trouble with the mobile drop-down menu. It overlaps instead of pushing content down if I change the navbar-inner div to 194px to fit the height of the repeating image I'm using. I am just not sure exactly why this is a problem. I've looked around, but can't seem to find a solution to this.
Additionally, how would I center the .brand element (logo) in mobile, instead of having it to the left? And how would I get the nav links centered vertically, and horizontally between the logo and the right edge of the screen?
sigh... Sorry, first time using Bootstrap, obviously... :/
For Centering logo, implement this css code to the referred class...
.container { position:relative; }
.brand { text-align: center; width: 97%;}
.navbar .btn-navbar {
display: block;
position: absolute;
right: 0;
}
For Centering, the nav links,
.nav-collapse .nav > li > a {
margin: 12px 0 !important;
text-align: center;
}
And for the drop-down overlay issue, add this,
.nav-collapse { padding-top: 1em; }