I have a problem with the size of the cards. On the Desktop side are ok, but on a lower resolution begin to be no longer equal. How should I proceed in this situation? I'm not an expert in css, I work on the backend but I would like in the future to have a correct solution how I could solve something like.
html
<div class="proditem">
%PROMO%
<div class="proditem_cover">
%COVER%
%promo_period%
</div>
<h3 class="protitem_title">
%TITLE%
</h3>
<div class="protitem_price">
%PRICE% eur %price_euro%
</div>
<div class="detalils"><a class="button1" href="%LINK%">Details</a></div>
</div>
a {
text-decoration: none;
color: inherit;
font-size:16px;}
.list_prod .proditem {
height: auto;
max-height: initial;
float: none;
display: inline-block;
margin-bottom: 10px;
vertical-align: top;
transition: 0.3s;
width: 40%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 2px 16px;
border: 0 !important;
border-radius: 1rem;
.proditem img {
width: 170px;
height: 170px;
max-width: 10vw;
max-height: 10vw;
/* object-fit: cover; */
}
image
As far as I can see, they decrease in size because they don't have the same information, depending on the text and image if they're not equal. How can I make them equal regardless of the information they have?
Maybe you can try to create wrapper class like :
<div style="width:100%; height:auto; display:flex; justify-content:flex-start;" class="wrapper">
<div style="width:50%; height:100%; " class="content"> <div/>
<div style="width:50%; height:100%; class="content"> <div/>
<div/>
This just a simple example to give you a some styling or aligning tricks. Try and write me if its not-proper code for you.
Related
I have a grouping of containers within another container. For clarification, here's the HTML:
<div class = "box-grouping">
<div class = "box-section grey">
<h2>What We Do</h2>
</div>
<div class = "box-section grey">
<h2>Where We Are</h2>
</div>
</div>
At the preferred resolution, the two boxes would be side by side, with the first box's left margin being equal to the second box's right margin, plus some space in between each. When I design in half my resolution, it looks like this. That's fine, except when I raise the resolution to full size, it looks like this. As you can see, the left and right margins are not equal.
I've tried setting the left and right margins to auto, but that didn't work. Here's the CSS I'm using:
.box-section {
display: inline-block;
width: 40%;
height: 300px;
margin-left: 60px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
I'd like the page to look like the half resolution screenshot, in any resolution. Additionally, the containers always appear too big in full resolution, but when I try to scale them down, they get too small for smaller resolutions. Any help would be appreciated!
You could set text-align: center to your .box-grouping class to center the boxes. Then, in your .box-section class, change your margin-left: 60px to margin: 0 30px to apply an even margin to both of the .box-section divs.
With the way your code is currently, you will need to add a media query to shrink the boxes to prevent wrapping for smaller devices.
.box-grouping {
text-align: center;
}
.box-section {
display: inline-block;
width: 40%;
height: 300px;
margin: 0 30px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
<div class="box-grouping">
<div class="box-section grey">
<h2>What We Do</h2>
</div>
<div class="box-section grey">
<h2>Where We Are</h2>
</div>
</div>
You could make the parent div display flex like such.
.box-grouping {
display: flex;
justify-content: space-around;
}
.box-section {
flex: 0 1 40%; /* this means -> flex:[grow] [shrink] [width]; */
display: inline-block;
height: 300px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
You can do something like this :
HTML
<div class = "box-grouping">
<div class = "box-section grey float-left">
<h2>What We Do</h2>
</div>
<div class = "box-section grey float-right">
<h2>Where We Are</h2>
</div>
</div>
CSS
.box-section {
display: inline-block;
width: 49%;
height: 300px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.box-grouping {
width: 90%;
margin: 0 auto;
}
Working codepen
<html>
<div class = "box-grouping">
<div class = "box-section grey">
<h2>What We Do</h2>
</div>
<div class = "box-section grey">
<h2>Where We Are</h2>
</div>
</div>
</html>
<style>
.box-section {
display: inline-block;
width: 40%;
height: 300px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
.box-grouping {
align-content: center;
text-align: center;
}
</style>
*Change the second box class name to a different name
*And float the first box to the left. And float the second box to the right.
I usually give my container a width off 100%.
Now for the first box give it the margin you want like margin-left 10px.
Now for the second box give it the same margin. Margin-right 10px.
Now for the spacing in between the two boxes. if you want it to be 6px. Give each box 3px margin.
My CSS:
#container {
position: center;
margin-top: 80px;
z-index: 950;
{block:IfGridTheme}margin-left: 430px;{/block:IfGridTheme}
{block:IfNotGridTheme}margin-left: 435px;{/block:IfNotGridTheme}
}
.entry {
position: justify;
font-size: 12px;
color: {color:Body Text};
font-family: roboto condensed;
letter-spacing: 1px;
{block:PermalinkPage}width: 1000px;
margin-top: 15px;{/block:PermalinkPage}
word-wrap: break-word;
margin-top: 45px;
}
#container1 {
white-space: nowrap;
border: none;
width: 100%;
margin-left: auto;
margin-right: auto;
}
#container1 > div {
background: none;
width: 100%;
height: 100%;
display: inline-block;
padding: 1% 5%;
margin-right: 176px;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
and my HTML for a certain type of page:
<div id="container1">
<div>
<div class="picture_holder" style="width: 1080px;">
<div class="picture" style="width: 1080px;"><img alt="LINKTOFIRSTIMAGE" height="575" src="LINKTOFIRSTIMAGE" />
<div class="captioning">
<div class="caption"><em>CAPTION</em></div>
</div>
</div>
</div>
</div>
<div>
<div class="picture_holder" style="width: 1080px;">
<div class="picture" style="width: 1080px;"><img alt="SECONDIMAGELINKANDSOFORTH" height="575" src="SECONDIMAGELINKANDSOFORTH" />
<div class="captioning">
<div class="caption"></div>
</div>
</div>
</div>
</div>
</div>
On a given page with a sequence of images that are exactly the same height, width, and overall aspect ratio, the spacing between them is exactly the same (though a lot wider than I would like) like in 1) of this drawing:
... but in a sequence of images that have the same height but wildly varying widths, the spacing is pretty off like in 2).
I personally don't want either. How do I change my code so that, for both these types of pages and however many more pages I plan to create, that the spacing between every image is exactly the same amount of pixels across the whole board of the site? Is there an imaginary box around these images causing the issue?
edit: I should also state that I am using the HTML function on a website, Tumblr.com, so certain properties like flex never seem available.
edit2: display: grid; and similar don't appear available either. This is also at the top of the code if that helps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Thank you for the info so far.
Your html structure:
<div id="parent_container">
<div id="card_1" class="card_properties">
<h3>Title to image 1</h3>
<img style="background:red">
<caption>Card 1 caption</caption>
</div>
<div id="card_2" class="card_properties">
<h3>Title to image 1</h3>
<img style="background:violet">
<caption>Card 2 caption</caption>
</div>
<div id="card_3" class="card_properties">
<h3>Title to image 1</h3>
<img style="background:seagreen">
<caption>Card 3 caption</caption>
</div>
<div id="card_4" class="card_properties">
<h3>Title to image 1</h3>
<img style="background:skyblue">
<caption>Card 4 caption</caption>
</div>
</div>
Your CSS structure:
#parent_container <=== setting up flex for container
{
display: flex;
flex-wrap: wrap; <=== makes sure if the cards are many then they go on next line
justify-content: space-evenly; <=== makes sure there is equal space
}
.card_properties
{
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
border-radius: 14px;
width:20vw;
height:200px;
padding:1em;
}
img <=== written this additional because I didn't have time to find image
{
width: 100%;
height: 120px;
border-radius: 14px
}
Working codepen example
So I'm working on making my site responsive and am having issues past the 1700px breakpoint.
My Problem
Here's my html:
<div class="container-1">
<div class="header">
<h2>OneDrive/ODB</h2><br><a class="one" href="#Anchor">Report a SharePoint bug here</a>
</div>
<div class="table-col-1">
<div class="border-1">
<div class="table-head-1">
<h1>Issues with OneDrive/ODB on the web?</h1>
</div>
<div class="text-container">
<p class="table-text">Post and vote on feature suggestions & improvements on UserVoice:</p>
<br>ODC/ODB web
</div>
</div>
</div>
My CSS for previous breakpoint:
.table-col-1{
padding: 1.5em;
display: inline-block;
width: 20%;
}
.table-head-1{
padding: 1.5em;
background-color: #515251;
display: inline-block;
border-bottom: 2px solid #000000;
}
.table-text{
font-size: 15px;
line-height: 18px;
padding-bottom: 1.5em;
}
.text-container{
padding-top: 1.5em;
padding-bottom: 3em;
}
.border-1{
border: 2px solid #000000;
}
My CSS for the breakpoint that's not working:
#media screen and (min-width: 1700px) and (max-width: 4000px){
.table-head-1{
padding: 1.3em;
background-color: #515251;
display: inline-block;
border-bottom: 2px solid #000000;
}
}
If I try and add a width, let's say 100%, to that or even to .table-col-1 I get this issue.
Please help. Thanks!
Add box-sizing: border-box to that rule - this will include the padding in the 100% width which is otherwise added, summing up to 100% PLUS the given padding.
Assigning width to 100% doesn't seem to work in this case because your code also adds extra padding to the div which is not needed.
So,can you please try changing the style properties of "table-col-1" to padding: 1.5em 0em; and width to 100%. A working example of this is here : https://jsfiddle.net/m70y6jnd/
Do let me know in comments below if this doesn't help you.
I have same css property but it looks different in chrome and mozila.
i want all those images to float left and with equal margin between them.
but the width of parent div of these images is 100%. and width of the images are also different. i want them to cover the complete area horizontally.
I don't know why it looks different in these browsers.
HTML
<div class="bottomLogoWrapper">
<h3>Lor separat existentie</h3>
<div class="logoContainer clearFix">
<div class="bottomLogo lfloat"><a><img src="images/fireFax.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/optus.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/toyota.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/theIconic.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/kogan.png"></a></div>
</div>
</div>
CSS
.bottomContent > .bottomLogoWrapper{
width: 100%;
padding: 50px 15px;
border-bottom: 3px solid #e5e5e5;
margin-bottom: 50px;
}
.bottomContent > .bottomLogoWrapper h3{
margin:0 auto 50px;
color: #3f3f40;
}
.bottomContent .logoContainer{
width: 100%;
display: inline-block;
}
.bottomContent .logoContainer .bottomLogo{
margin: 0 5%;
}
.bottomContent .logoContainer .bottomLogo:last-child{
margin: 0px;
}
.bottomContent .logoContainer .bottomLogo a{
cursor: pointer;
}
.bottomContent .logoContainer .bottomLogo img{
width: 70%
}
Chrome
Mozila
I think you can add vendor prefixes(webkit,-mos- etc) for the respective browsers in which you want to run your code
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo