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.
Related
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.
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.
What ends up happening is that the two columns cannot cohabitate next to each other without shrinking the width by about 2%. Doing that causes the edges to not align with the header and it just looks off. Is there something I am missing about 'width' or 'padding'?
This is what I am trying to emulate: https://www.w3schools.com/howto/howto_css_blog_layout.asp
This is what ends up happening (before changing the width by -2%):
What happens when I have to change the width:
body {
padding: 20px;
background: #f1f1f1;
}
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
#media(max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<div class="header">
<h2>Harry's Den</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>I love the World</h2>
<h5>Helloo!</h5>
<p>Text!</p>
</div>
<div class="card">
<h2>Wow this works so far!</h2>
<h5>I am just happy to have a semi-functional blog!</h5>
<p>Yay! I do not have much to say other than I am happy to have made it this far. Hopefully this will help!</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me!</h2>
<p>University: Texas Tech University</p>
<p>Major: Computer Engineering (BS)</p>
<p>Minor: Mathematics</p>
<p>Interests: Energy Infrastructure and Space Exploration Efforts</p>
</div>
<div class="card">
<h3>Popular Post</h3>
</div>
<div class="card">
<h3>Follow Me!</h3>
Twitter
<br/>
Facebook
</div>
</div>
</div>
<div class="footer">
<h2>Developed by Barry Allen</h2>
<h2>Quantum Enterprise Projects</h2>
</div>
Here is the information from the MDN Web Doc.
By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height you have to adjust the value
you give to allow for any border or padding that may be added.
The box-sizing property can be used to adjust this behavior:
content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content
box will be 100 pixels wide, and the width of any border or padding
will be added to the final rendered width.
border-box tells the browser to account for any border and padding in the values you specify for width and height. If you
set an element's width to 100 pixels, that 100 pixels will
include any border or padding you added, and the content box
will shrink to absorb that extra width. This typically makes it
much easier to size elements.
You have to use box-sizing:border-box to include border, padding and margin everything included in the width of your element.
Read more information in MDN Web Docs
* {
box-sizing:border-box;
}
* {
box-sizing:border-box;
}
body{
padding: 20px;
background: #f1f1f1;
}
.header{
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
.leftcolumn{
float: left;
width: 75%;
}
.rightcolumn{
float: left;
width: 25%;
padding-left: 20px;
}
.card{
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after{
content: "";
display: table;
clear: both;
}
.footer{
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
#media(max-width: 800px){
.leftcolumn, .rightcolumn{
width: 100%;
padding: 0;
}
}
<div class="header">
<h2>Harry's Den</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>I love the World</h2>
<h5>Helloo!</h5>
<p>Text!</p>
</div>
<div class="card">
<h2>Wow this works so far!</h2>
<h5>I am just happy to have a semi-functional blog!</h5>
<p>Yay! I do not have much to say other than I am happy to have made it this far. Hopefully this will help!</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me!</h2>
<p>University: Texas Tech University</p>
<p>Major: Computer Engineering (BS)</p>
<p>Minor: Mathematics</p>
<p>Interests: Energy Infrastructure and Space Exploration Efforts</p>
</div>
<div class="card">
<h3>Popular Post</h3>
</div>
<div class="card">
<h3>Follow Me!</h3>
Twitter
<br/>
Facebook
</div>
</div>
</div>
<div class="footer">
<h2>Developed by Barry Allen</h2>
<h2>Quantum Enterprise Projects</h2>
</div>
Here is the Fiddle Link. You can expand and shrunk the size of the screen and check it out how it is reacting.
Padding and border are counted in the width. So you have to subtract them.
In your case you can do
.rightcolumn {
width: calc(25% - 20px);
}
I have this code here:
<div style="border:3px solid #808080;">
<h1 style="text-transform: uppercase;font-size: 38px;color: #808080;text-align: center;">Lowell</h1>
<div class="column-1">
<img src="images/ruler-icon.png">
</div>
<div class="column-2">
<img src="images/bed-icon.png">
</div>
<div class="column-3">
<img src="images/bath-icon.png">
</div>
</div>
my problem is that the border does not go over the column-1, column-2, column-3...those elements are floating left, how do I get them to be included in the border?
Here is the CSS
.column-1, .column-2, .column-3
{
float:left;
width: 33%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
}
Either add a div in parent with clear:both property right after the floated divs as mentioned by RemyaJ. like this
https://jsfiddle.net/zmasvt8b/
Or
Simply give overflow:hidden property to the parent div. Like this
https://jsfiddle.net/jv5xtLg9/
I realize you've already chosen an answer, but here is an alternative - using flexbox. I also separated all the CSS from the HTML (like it should be!)
.container {
/* Important for columns */
display: -webkit-flex;
display: flex;
}
.item {
/* Important for columns */
flex-grow: 1;
border: 3px solid #808080;
border-top: none;
height: 52px;
padding: 10px;
}
.heading {
border: 3px solid #808080;
margin: 0;
text-transform: uppercase;
font-size: 38px;
color: #808080;
text-align: center;
}
/* Remove duplicate borders */
.item-2 {
border-left: none;
border-right: none;
}
<h1 class="heading">Lowell</h1>
<div class="container">
<div class="item item-1">
<img src="images/ruler-icon.png">
</div>
<div class="item item-2">
<img src="images/bed-icon.png">
</div>
<div class="item item-3">
<img src="images/bath-icon.png">
</div>
</div>
Add a div with style clear:both after the floated divs inside parent div. This will hopefully fix this issue.
I think this is the css you need. Choose the width according to your needs.
.column-1, .column-2, .column-3
{
width: 30%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
display:inline-block;
}
The reason for this is that parent elements are never to contain floated elements. To make this happen, just add overflow:auto; to your main div. That will force the div to contain floated elements that "overflow" the container.
There are other, probably better ways to accomplish the same thing but this is the easiest.
Never, ever add HTML elements to do what CSS can and should do.
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
I am running into an issue that I am unsure of the cause. I had three boxes that I want lined up in a horizontal line, which they are until I added my title and descriptions inside of the boxes. Why would adding the titles and descriptions make this staggering effect?
You can see what it is doing inside of my snippet.
#home-img-block-wording-container {
width: 100%;
height: 400px;
border: 1px solid black;
}
.home-img-wording-blocks {
width: 33%;
height: 100%;
text-align: center;
border: 1px solid black;
display: inline-block;
}
.home-img-wording-block-title {
padding-top: 20px;
font-size: 2em;
}
.home-img-wording-block-description {
padding: 25px 20px 0 20px;
font-size: 1.2em;
color: #adadad;
}
<div id="home-img-block-wording-container">
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
</div>
</div>
The problem is that the text in each inline-block .home-img-wording-blocks element is being aligned to the baseline of the previous box.
As stated by the relevant specification:
10.8 Line height calculations: the line-height and vertical-align properties
The baseline of an inline-block is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its overflow property has a computed value other than visible, in which case the baseline is the bottom margin edge.
It's worth pointing out that the default value for the vertical-align property is baseline. To fix your problem, you could align the element to the top by adding vertical-align: top:
#home-img-block-wording-container {
width: 100%;
height: 400px;
border: 1px solid black;
}
.home-img-wording-blocks {
width: 33%;
height: 100%;
text-align: center;
border: 1px solid black;
display: inline-block;
vertical-align: top;
}
.home-img-wording-block-title {
padding-top: 20px;
font-size: 2em;
}
.home-img-wording-block-description {
padding: 25px 20px 0 20px;
font-size: 1.2em;
color: #adadad;
}
<div id="home-img-block-wording-container">
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
</div>
</div>
Just set vertical-align: top; to the .home-img-wording-blocks item
A solution by hiding the overflow of your divs and making sure no unintentional margins or padding are being applied:
* {
margin:0;
padding:0;
}
#home-img-block-wording-container {
width: 100%;
height: 400px;
border: 1px solid black;
}
.home-img-wording-blocks {
width: 33%;
height: 100%;
text-align: center;
border: 1px solid black;
display: inline-block;
overflow:hidden;
}
.home-img-wording-block-title {
padding-top: 20px;
font-size: 2em;
}
.home-img-wording-block-description {
padding: 25px 20px 0 20px;
font-size: 1.2em;
color: #adadad;
}
<div id="home-img-block-wording-container">
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div><div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
</div><div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
</div>
</div>