I am trying to create two sections, one left and one right, where one of them is a image and the other one is text. They should always be the same width and height and always square. I use the Avada theme on Wordpress and trying to fix this with their Element Builder and custom css. No luck.
Here is a page where the resault is not square but responsive:
https://sundlof.se/devskargard/
I have found some codes that does force div to be square but they don´t take the other square in to the equation. If this requires jQuery, please tell me, I have not yet tried that, I really what to get this done with css if possible.
Any ideas will be much appreciated!
Regards,
Fredrik
You can use display:flex to on the square wrapper and give it a height. This will always result in flex-child taking height of its immediate flex parent.
You can then plugin some media-queries to make this flex grid responsive using flex-wrap property
body {
padding: 20px;
box-sizing: border-box;
}
.flex {
display: flex;
justify-content: center;
border: 1px solid black;
height: 250px;
}
.section {
align-items: center;
width: 50%;
border: 1px solid black;
margin: 5px;
}
<div class="flex">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
</div>
You Just go through following links then you will get an idea about the aspect ratios and responsive blocks.
Learn how to maintain the aspect ratio of an element with CSS.
Aspect Ratio Boxes Advanced
<div class="container">
<div class="text">1:1 Aspect ratio</div>
</div>
.container {
background-color: red;
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 20px;
color: white;
}
Example
Thanks for the help!
I ended up to justify the square with media querys every 200 och 300px to keep it close to square. Not a beautiful solution, but a simple one.
Related
I've written up a very basic HTML and CSS page to test out my responsive web design skills but the calculation of the padding is going wrong and I can't figure out why, any help from people would be greatly appreciated.
Below I have added my code for you to see. I have one 'main' with a 'section' and an 'aside' in it. Inside both are a box of two different sizes. I calculated the size and margin of the boxes ok but the padding won't work properly. I calculated the padding by target/context=result, which in this case for the first box is 25px padding / 500px = 0.05 (5%), and for the second box is 25px/300px= 0.08333333 (8.333333%).
However this does not cause a 25px padding but instead creates a much bigger one. When I look at the Google Chrome Developer Tool it tells me that the padding for the first box is now 56.875px and the second box is 94.797px.
I've been trying to solve this for sometime now trying different things but can't manage to figure it out.
Any help on this would be greatly appreciated. Code is below.
body, section, aside, p {
margin: 0;
padding: 0;
}
main {
width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */
background-color: lightgreen;
min-height: 1000px;
margin: 0 auto;
}
section {
height: 500px;
width: 44.067133%; /* 500/1137.590 */
background-color: green;
float: left;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 5%; / 25/500 */
}
aside {
height: 300px;
width: 26.434279%; /* 300/1137.590 */
background-color: blue;
float: right;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 8.3333333%; /* 25/300 */
color: lightblue;
}
<body>
<main>
<section class="box-green">
<p>This is a green box</p>
</section>
<aside class="box-blue">
<p>This is a blue box</p>
</aside>
</main>
</body>
When you calculate padding in percentage, that amount is calculated by the width of the containing block, not the height.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
Padding, when given in percents, is based on the containing element not the height of the element itself.
Although this is not the correct way to write a responsive code but just to make you understand the padding % is not determined from the div size but its determined from the screen size. Also the margin you are using 4.398736% is adding on both left and right side of both the divs. Plus the padding of 5% on both side of .section and padding of 8.33333% on both side of .aside. its making the total size to 115.96555%.
For your understanding if you want both the divs (section and aside) to align side by side. Use the below written css style for both of them.
.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}
.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}
Hope this helps..
It appears that a unicode emoji character overflows it's bounding box on a non-retina display, but it remains within the character bounds on a retina display. So how do I horizontally center an emoji in a div on both a retina and a non-retina display?
Non-Retina:
Retina:
This works on a retina screen, but is off a few px on a non-retina display:
<div style="text-align: center; width: 3rem; border: 1px solid red;">😃</div>
Here is a CodePen to try things https://codepen.io/anon/pen/GmzoNP. You will need a retina and non-retina screen to observe the problem.
Here are some of my ideas that I tried. I have not had success with them yet but I think the last two are on the right track:
Text-align center (it is text after all)
width: 0, 50% left margin, transform: translateX(-50%)...
Changing character width
Using a monospace font
A little context about how others have solved this problem - Slack and Google both just use images of emojis. This is not ideal in my case because it increases bundle size and and requires some extra logic to handle copy/paste.
I know it's a while since this question was asked but I've had the same problem and maybe my answer can help someone.
I could center the emoji by raising the font size to minimum size of 26px. With a minimum font size of 26px the emojis are centred on retina and not retina screens. In my final solution I raised the font size to 4em and then scaled it back down with transform: scale(0.25);.
Here are the experiments I made, which leaded me to my solution: https://codepen.io/faessler/pen/aRNOEY
If someone has a better/less dirty way, I would be happy to hear about it. :)
.fontSize span {
display: inline-block;
font-size: 26px;
}
/*BOX*/
.gridGroup {display:flex; margin-bottom:10px;}
.grid {position:relative; width:100px; height:50px; margin:0 10px 10px 0; border:1px solid blue; text-align:center;}
.grid:before {content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:100%; background:red;}
<div class="gridGroup">
<div class="grid fontSize"><span>😃</span></div>
<div class="grid fontSize">bla <span>😃</span> bla</div>
</div>
In my case, a width a little bit greater than the font-size solved the problem. The parent div was centring with flex.
div.emojiIcons {
display: flex;
flex-direction: row;
justify-content: center;
}
span.emoji {
font-size: 24px;
width: 26px;
}
Here's a more semantic approach to it.
.emoji {
display: flex;
padding: 1rem;
border: 1px solid black;
position: relative;
}
.emoji::after {
content: "";
width: 1px;
height: 100%;
background-color: red;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%)
}
.align-center {
/* vertically center. */
align-items: center;
}
.justify-center {
/* horizontally center. */
justify-content: center;
}
<div class="emoji align-center justify-center">
🚀
</div>
One very common question on CSS is how to vertically center an element. With CSS3 being able to do so many special effect, why they are not including the vertically center function into CSS3?
I don't believe it is a difficult function to add if even a beginner developer can make a function to center things with javascript. And with so many hacks for different situations, it is clear that with CSS alone it is possible to center things vertically. So maybe there are other reasons that they decide not to make it a standard property?
That is because how layout is performed with CSS — CSS is predominantly arranging items on the x-axis, like how 100% width works as expected but not 100% height. This is likely due to the possible "calculation/logic loop" that happens as width is dependent on height and vice versa, so one axis must always be prioritized when it comes to calculation.
Extra info by #BoltClock:
The x-axis thing has to do with the natural flow of text in a
document. Remember that the Web started off as a series of pages, so
HTML and CSS were originally built around this fundamental premise -
it has since evolved into an application platform, but the legacy is
still there. Flexbox is the CSS3 way to vertically center boxes - the
only issue is cross-browser support, but since the question is about
CSS3 anyway, that's to be expected.
Similarly, in terms of dictating alignment, horizontal alignment is easy because the width of an element is often implicitly or explicitly stated, like how a block element automatically has a implicit width of 100% unless otherwise stated, allowing for easy calculation of a center position along the horizontal axis.
However, this does not work for the case of vertical alignment, where often than not the vertical dimension is dependent on the amount, length and size of the content. In the case where vertical height is explicitly stated, this can actually be easily done:
by using the CSS flexbox method
The good: standards compliant and very simple, dimension of element of interest does not have to be fixed
The bad: lack of extensive cross-browser support, but appears very promising today
body {
margin: 0;
padding: 0;
}
.box {
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.box > .content {
background-color: #333;
color: #eee;
padding: 1em 2em;
}
<div class="box">
<div class="content">I am centered</div>
</div>
by using absolute positioning and CSS transforms
The good: extensive cross-browser support, dimension of element of interest does not have to be fixed
The bad: fuzzy text rendering (occasionally) due to sub-pixel translation
body {
margin: 0;
padding: 0;
}
.box {
background-color: #eee;
position: relatve;
width: 100%;
height: 100vh;
}
.box > .content {
background-color: #333;
color: #eee;
padding: 1em 2em;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="box">
<div class="content">I am centered</div>
</div>
by using absolute positioning and negative margins
The good: extremely straightforward
The bad: dimension of element of interest MUST be fixed
body {
margin: 0;
padding: 0;
}
.box {
background-color: #eee;
position: relative;
width: 100%;
height: 100vh;
}
.box > .content {
background-color: #333;
color: #eee;
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
<div class="box">
<div class="content">I am centered</div>
</div>
I'm building a tile-based portfolio Wordpress theme, and I can't get the tiles to center correctly in their parent div. Here's the static page (I'm migrating from .cu.cc asap). I've used inline-block to align them all on one row, and there are margin styles to keep the gaps between the tiles, but what I'm getting is this (red lines added):
I'd like to align the tiles flush to the red lines - how can I do it?
Here's a boiled down version of the HTML:
<div class="content-wrapper">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
And the CSS:
.content-wrapper{
width: 678px;
margin-top: 66px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.tile{
display:inline-block;
width: 182px;
height: 295px;
background-color: #e1e1e1;
border: solid 1px rgba(176,176,176,0);
margin-bottom: 64px;
margin-right: 35px
}
Thanks, Oliver
I'll add to Karl-André's answer by noting that :last-child is not supported in IE8, so it would be nice to switch to
.content-wrapper .tile {
margin-left: 10px;
}
.content-wrapper .tile:first-child {
margin-left: 0px;
}
Even more clever decision is to use the following:
.content-wrapper .tile + .tile {
margin-left: 10px;
}
Just three lines instead of six, elegant and works everythere.
Also, if you're bored of manually typing margin and want justify-like behaviour, consider
Fluid width with equally spaced DIVs.
Try adding this :
.tile:last-child{
margin-right : 0;
}
You div are centered, but the last div margin is messing up the elements
As the title says, I need two divs to be equally high. They should be as high as it needs to be for the content to fit. The current CSS is:
.portfolioleft{
float:left;
width:189px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioleft img{
border-radius: 10px;
}
.portfolioright{
float:right;
width:500px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioright a{
color:#FFFFFF;
}
and the html for the divs is:
<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear"> </div>
CSS alone cannot tackle this feat (unless you want a hack solution where you can use an image). You will need to implement a JS solution. Since the content is dynamic and you do not know how high the columns will be, you will need to access the DOM to determine the height of the tallest column then apply to the indicated columns. I use the following regularly and it works quite well and is easy to implement.
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
Unfortunately this is a tricky problem in CSS. If you only want to extend the background color of your left sidebar to the bottom of the section (with its height defined by the right div), try wrapping them inside a parent div (which scales to the height of the right div), then positioning the left div with position:absolute and height of 100% like so:
<div class="portfolio">
<div class="portfolioleft">...</div>
<div class="portfolioright">...</div>
</div>
.portfolio {
position: relative;
background: white;
}
.portfolio .portfolioleft {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #436FAC;
}
.portfolio .portfolioright {
margin-left: 200px;
}
If BOTH sides are dynamic and you need both heights to match, the only surefire way to make it work across all major browsers is to resort to a table-based layout with two columns, as karmically bad as that might be.
cell properties in your left right div
i checked your code and replace the float into display table-cell
you can check to this live http://jsfiddle.net/rohitazad/prMLh/1/