I am centering a group of images using:
DIV Containter: text-align: center;
DIV Image: display: inline-block. (No Float)
It works perfectly, but the very last row which is 1 or 2 pixel shifted on the right, not matter how many rows there are (different resolution).
I can't make it work. See pages:
https://www.trampolineandparts.co.uk
https://www.trampolineandparts.co.uk/replacement-parts
Please help. Thank you!
As #Mary pointed out, it's the space between elements. You can just use display: flex on the parent instead, and that will maintain the layout and fix the spacing issue.
div.imgcnt {
/* text-align: center; */ /* no longer need this */
display: flex;
flex-wrap: wrap;
justify-content: center; /* if you want the `.img` elements centered on the page */
}
Try not leaving any space between your <div> and it should fix your issue.
Hi i took look at the website and noticed the 1 / 2 px displacement. It comes because of the display:inline-block. I tried fixing it. I would use float:left on the images rather than using inline-block. Try changing your css files to this.
div.imgcnt {
text-align: center;
padding-left: 6%;
}
div.img {
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
width: 160px;
border: rgba(0, 0, 0, 0.17);
border-style: solid;
border-width: 1px;
float: left;
}
You have whitespace between your inline-block elements for sure. Check if this will kill the unwanted space:
<div class="inline-block"></div><div class="inline-block"></div><div class="inline-block"></div>
Related
This is my reference photo on what i would like to achieve. My intention is to have the buttons be the same height regardless of text length and have them be in on line (and stop them from forming this sort of three triangle look below (screenshot below is my existing jsfiddle.
first i tried to set them the same width but the shorter first button does not naturally fit since the other two need an extra space for the words:
.up-promos .top-area .tabs a {
width: 150px;
}
Because of this, I also tried adjusting the height for them to stay the same size however all of them do not align (first button with the least text looks awkward) and the first button somehow moves down. I also tried aligning the text to center and adjusting the margin but the height css probably prevents this change.
.up-promos .top-area .tabs a {
border: 1px solid #fff;
color: #fff;
padding: 10px;
border-radius: 8px;
display: inline-block;
text-align: center;
margin: 0 0 10px 10px;
text-decoration:none;
text-align: center;
width:150px;
height: 30px;
}
Here is the JSFiddle for all of this:
https://jsfiddle.net/b34rsLyu/
I will need some help on these adjustments. Tried what I thought was the solution, hope I can get a guide in the correct fix.
There a few things that can be done.
use flex for .tabs container.
dynamically calculate font size - using font-size: calc( ... )- to prevent overflow for button, or any other container.
if you want to achieve alignment like in in the first screenshot, set a min-width in r-button class and flex-wrap: wrap in .tabs class.
Try using these values, and then modify other classes as you see fit.
.tabs {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
gap: 8px;
flex-wrap: wrap;
}
.r-button {
border: 1px solid black;
border-radius: 8px;
padding: 15px 0px;
word-wrap: break-word;
min-width: 10rem;
font-size: calc(1rem - 0.1vmin);
}
Check the docs for more on css Flex property
You could use display: flex on your container to have better control over how elements behave and flow in relation to each other, here's the simplest solution you can get:
.up-promos .tabs {
display: flex;
}
If you want to learn more about display: flex, because there's tons of things you can tweak on it, I seriously suggest this guide. It's my go-to place to remind myself about all the properties it has as I always fail to remember them.
I have a design with 3 (css grid) columns. The second column has nested grid content that needs to vertically scroll, while the other two columns stay their respective height. I gave the second nested column an overflow, but I also need to give it a top and bottom padding or margin. My solution works without the top/bottom padding, but when I add it, it forces a scroll of the general screen, and thus the other columns.
Here is the Fiddle: https://jsfiddle.net/n2fole00/cger28v4/
Here is the part of the code that uses the scroll and padding.
.section-column-grid-container {
display: grid;
align-content: start;
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-gap: 35px;
background-color: grey;
height: 100vh;
padding: 35px;
overflow-y: scroll;
}
.section-column-grid-container > div {
background-color: pink;
text-align: center;
padding: 0;
font-size: 18px;
height:100px;
}
How can I fix this? Thanks.
I have made some changes to your code and here is the updated fiddle:
Updated fiddle link
Please check and confirm if this is what you are looking for:
Main change I made is:
.main-grid-container {
overflow: hidden;
}
I am creating a website with Wordpress for my mother-in-law (that's for the girly design). Basically I am near completion, but I am way over my head with two issues in the CSS. These seem very basic issues even from my standpoint of view, but with hours and hours of tinkering I am fresh out of ideas and Google didn't help me this time. It's been a while since I have had to create or modify any CSS.
First problem:
I cannot get the horizontal menu to center. I have tried to remove the float:left, I have tried to replace it with float:none and I have changed the display: block and display:inline lines to inline-blocks but the menu stays in its position. Only difference I have managed to make is to move the whole menu to the top of the page and that's not desired. What could be the issue in this?
Second problem:
There seems to be padding (the white lines) at the top of the menu and at the bottom and top of the small menu (mobile). I have tracked down all the padding-lines in the CSS but none of them really make a difference, only one which removed the horizontal paddings and that's not desired.
I would be really glad if somebody spots where I have gone wrong!
The website is at http://janenlahwr.cluster020.hosting.ovh.net/
Thanks in advance!
Best regards,
Tero Korhonen
Lappeenranta, Finland
Hi Tero,
the first problem has really quick solution - CSS3 Flexbox. You can read about it on this w3schools site.
Remove unnecessary float: left and add display: flex and justify-content: center to .main-navigation ul. So it should looks like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
display: flex;
justify-content: center;
}
Second problem you can fix with setting div.site-logo max-height = height your logo (I see that is 200px). So in this case should looks like this:
.site-logo {
min-height: 70px;
padding: 0px;
float: left;
line-height: normal;
max-height: 200px;
}
Edit:
Sorry, I forgott check for lower resolutions. There is problem with overflow. You set in style.css:640 overflow: hidden and it works correctly since resolution is above 800px. If not then activates this rule:
#media only screen and (max-width: 800px) {
#main {
overflow: visible;
}
}
that overwrites previous correct rule for #main overflow: hidden. So you have two options: delete this rule for screens over 800px or change this property from visible to hidden.
I hope I helped you with your problems :) Good luck!
For the menu problem, change your CSS rules like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
/* remove float: left; */
text-align: center; /* added */
width: 100%; /* added */
}
.main-navigation ul li {
position: relative;
display: inline-block;
/* remove float: left; */
text-align: center; /* not necessary */
}
What is wrong with this? Ive read a couple of posts which suggest that in order to have inline-block elements all on the same line with only overflow-x, the following CSS is all that is required on the parent:
div {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
This is my CSS, straight from my firebug for both the parent, and the elements which i need on the same line. The elements are wrapping with only a vertical overflow. Im confused. Any suggestions?
.elementsRequiredOnSameLine {
background: none repeat scroll 0 0 white;
display: inline-block;
float: left;
height: 10em;
text-align: center;
width: 6em;
}
.parent{
display: inline-block;
margin: 10px auto;
min-height: 12em;
overflow-x: scroll;
padding: 10px;
white-space: nowrap;
width: 95%;
}
Using float: left on the elements will cause them to ignore the nowrap rule. Since you are already using display: inline-block, you don't need to float the elements to have them display side-by-side. Just remove float: left
Was because of the float:left;, once i removed that, fine. Spotted it after typing out question sorry.
I am not sure what i can do to fix it but I am unable to use css to align the images in 1 row and then another row like a gallery. Can anyone help. I have tried to float the div entry to left and still unable to get it correct.
here is the css for entry
.entry {
clear: both;
margin: 0;
padding-top: 1px;
}
Add
display:inline-block
to your div class .wp caption
See this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ as there may be some issues with Cross Browser but i think its only IE6, maybe 7
so in your case
.wp-caption {
border: 1px solid #a87c31;
text-align: center;
background-color: #10050B;
padding-top: 4px;
margin: 10px;
display: inline-block;
}