If you check the site im currently working on:
http://4rate.org/
I want the squares to be evenly aligned to the users screen width, so everything will look "centered",
with no extra space on either side. I could hardcode the widths to match perfectly with my own screen, but then everyone which dont have my screen, will not have it look perfect.
I discovered that for example if i browse this site on my sony z3 compact, there will be 3 squares per line, and a pretty big "extra space" on the right side of the screen.
Same thing would apply for different screen sizes with different users.
How would you go about solving this?
Try the below
Update the class .ratingdiv by updating float:left with display:inline-block and adding vertical-align:top to get this fixed..
CSS:
.ratingdiv {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
display: inline-block;
height: 280px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
vertical-align: top;
width: 255px;
}
You may want to look into using a Javascript framework to accomplish this, or by using CSS media queries. Even something like Bootstrap can accomplish this quite easily.
Related
I'm trying to build a website with bootstrap and other css resources and I'm trying to fix the following issue in the last 2 days and I think I won't be able to fix it.
I have a row of 50 250x250 cards with a left-margin of 30px. When I'm on the full screen, I get no problems. However, when I change the screen size, a huge gap between the latest card and the screen borders occurs. This continues until the browser can fill the empty space with the following card.
I don't want to have this empty space and want the cards to automatically align themselves to the center.
I've also divided the columns to 10 rows but still, there was no change.
Is there a way to fix this issue? Screenshots are attached for fullscreen and smaller screen.
You can also see it yourself from: http://sagtekin.com/letseat/maintest.php
Thank you very much for your valuable help.
I have to say your code is a bit of a mess, I would encourage you to go back and reference the bootstrap documentation for proper semantic and structural code as you have a bunch of unnecessary stuff happening.
In a nutshell you have to make your containing div has a text-align: center applied. I also gave a margin-right and left of 15px to offset spacing and maintain centering.
Secondly make sure your column classes make sense and fit into each other mathematically! I've wrapped your images in a col-lg-12 and wrap your images in a col-lg-4 so that there will be at least 3 up. Adjust image sizing as you see fit I made smaller images so you could see the responsiveness in the fiddle more.
.container {
text-align: center;
}
#card {
background: #FAFAFA;
width: 150px;
height: 150px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
display: inline-block;
}
#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}
img {
float: left;
}
Here is a Fiddle
https://jsfiddle.net/gward90/oygyj9qd/
You have several times id card, use class.
Don't set the width of the column divs, let bootstrap do it. (Fixed size and responsive design don't mix too well.)
Use the img tag unless you really want the image in the background and then put something over it which dictates the size.
If you do it like that, then the container will behave as you expect it.
I'm fairly new to programming at all and was just wondering how I could keep elements in their place no matter the screen size of the user. More specifically, how I could keep a list aligned at the top from pushing to the next line when the user changes the width of the screen. I've looked for a while for the answer but just haven't been able to find anything; could be that I just don't know what to search for.
Here is my code for the CSS portion of the list:
li {
display: inline-block;
text-decoration: none;
margin: 2px 4px 3px 4px;
list-style-type: none;
float: left;
display: table-cell;
display: fixed;
background-color: 362C24;
}
You could use Static Positioning (http://www.w3schools.com/css/css_positioning.asp), but I don't think that's what you want to do when your programming for responsive design. You could use flex-box(https://css-tricks.com/snippets/css/a-guide-to-flexbox/), but if there's not space for something it's going to be positioned accordingly. Everyone is looking on a different size screen, you want to accommodate everyone. Fixing things in absolute places might be ok for desktop, but with the wide array of viewport sizes, I don't recommend it.
I am just learning HTML and CSS (JavaScript will be next.) I am developing a website on which I have two boxes (defined as <div>s) side by side. They have different horizontal sizes, but each has "height: 1000px".
The large one sits right of the narrow one, and is defined by
<section style = "width:900px; height: 1000px; margin 10px; padding: 20px; background: #BBD1FF; display: inline-block; vertical-align:top;">
I added text within the confines of both boxes, and everything was fine. Then I added more text in the rightmost box, and the box seems to have expanded it's vertical dimension. The original and the new text in the box don't come close to filling the box, so what is going on here? I can't find any property of <div> which seems to relate to this.
Okay so i've taken a guess to what I think your trying to do. Basically, add max-width to your divs to prevent them from expanding. Here's a JSFiddle with something simple what I think your looking to do.
.div-one--left {
height: 1000px;
max-width: 50%;
min-width: 50%;
background: blue;
float: left;
display: block;
}
Also, when dealing with widths. Its good practise to always use percentages. You can't build responsively if your using pixels as widths (but thats off topic slightly).
http://jsfiddle.net/63617aLj/
I'm trying to create a country list with 3 columns. What I did so far is that:
HTML:
<div class="flagList">
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
...
</div>
CSS:
.flagList {
margin-bottom:20px;
width: 100%;
float: left;
font-family: Calibri, Verdana;
font-size:14px;
line-height:13px;
border:1px solid;
}
.flagColumn {
width: 33%;
float: left;
border:1px solid;
}
I don't want to leave any space between rows such as the space between Comoros and Cote d'lvoire. What I want to do is:
How should I change my code?
This is the downside of floating. When there are different heights, divs will start getting stuck on the edges of the bigger ones. There are 3 ways to fix this:
Use a jQuery plugin that equalizes all heights like what Foundation does.
Give .flagColumn a min-height that is bigger than the biggest one. This will make their heights all equal but might give more space than you'd like.
Switch these from a div grid to a table grid. Tables have their place and this situation might be right for it. Avoid this suggestion if the grid changes widths. Use this if .flagColumn is always 33%.
If it were up to me, I would use the 1st or 2nd option. Table properties can be changed to work with media queries too if that is needed.
You may consider looking into the overflow CSS property if you don't mind the end of the country name being hidden. With this, your CSS would become something like:
.flagColumn {
width: 33%;
float: left;
border:1px solid;
height:1em;
overflow:hidden;
}
This allows you to get rid of the spaces while still having them appear in alphabetical order in your code. I think this will also scale better across screen/window sizes.
There are ways to have the "hidden" content show when the user mouses over the box. Here's one example, but you can find others that might fit your goals better.
box sizing: border-box;
border-sizing: border-box; is your friend. Look at my jsfiddle:
http://jsfiddle.net/wr1zL2ax/3/
I've searched google and SO for a solution to this problem but have not found it, perhaps this is due to my uncertainty as to how to word it best.
Here is the issue:
I have a 3 column page using divs. The divs are as follow, left, middle and right container divs, with various content inside. What I need them to do is align horizontally from the top. What they are currently doing is some jigsaw jagged aligning. I believe this is because of the content inside (as I've altered everything else without result), which varies from titles with padding around it, to text, fb like buttons, etc. As you can see here, http://sunnahspace.com the temporary double line on the page is what I am trying to align them against. I can post all the code you need but as it is a lot I would prefer not to bog everyone down with a lot of reading, I will post the css and if you ask for something specific I will post it, otherwise it can be viewed from the source for the index page linked above. And please go easy on me, I'm a bit of an idiot when it comes to developing, and I'm sure you've all been noobs before. Thanks in advance.
Here is the css for the 3 divs:
#middle_container {
float: right;
width: 60%;
padding: 5px;
margin:auto;
}
#right_container {
float: right;
width: 20%;
padding: 5px;
margin: auto;
}
#left_container {
float: right;
width: auto;
min-width: 200px;
padding: 5px;
margin: auto;
}
FIrst of all you need to take off the first spacer above the first column_middle_temp1.
Second you need to remove margin-bottom: 20px from the top_container.
Lastly you need to add a at the bottom of:
<div id="left_container">...</div><br clear="all" />
This is what I saw right away, if this still doesn't work let me know.