Hello I have situation in my queries where I have my content in table-cell
method when it is full size and I put a query to make it table-row however
it loses the full width of my boxes and the main div sticks to the other on top of it like so:
This is the CSS query I have for it
@media (max-width:1120px) {
#about-intro, #statements-icons {
display: table-row;
text-align: center;
}
}
Do you have them wrapped in something defined with display:table so that the rows know that they all belong to the same table and so should all be the same width?
csosa, Is it possible to post a link to the live test site that is not built in CodePen?
Would you consider starting down lower and doing something constructive with the row of team images? You might consider making the figure tags {display:inline-block} and deleting the table styles assigned to #ourteam and applying {text-align:center} instead. In that way, the row of images will wrap and center as the width of the page changes. The space between each images will not change. {display:table + cells} is only useful when the row does not need to wrap. These do. Notice the horizontal scroll bar?
Yes I wanted to make it more smoother but that is the only
way I knew how…but yeah I could start there.
Let us know when you are finished modifying the row of team members and we/I will return the original issue.
wow that is a lot smoother…so for responsive techniques is it better to
keep simple and use display inline block instead of tables? PAGE
I see…
No, not all. It is best to pick the technique that provides the results that you need. In this case, table/table-cells are not practical because the row cannot wrap. inline-blocks wrap easily and center nicely.
ah got it
Another little tidbit, if I may…
The <figure> objects have {padding-left:30px} assigned to provide space between them. I would suggest that you apply a symmetrical {padding:0 15px;} instead. In that way, they will be truly centered. (If you look carefully, the lower images boxes are slightly offset from those above at this moment.) Give it a try!
hmm I did it but they seem still offset when the viewport is changed
between the second and third image
My focus may bounce around a bit, but I am zeroing in on the table in question
First, the table <div id="about-wrap"> is the container with the two columns:
<div id="about-wrap">
<div id="about-intro">
<div id="statements-icons">
Considering the content in the right column, the text in the left column must be shorter than the height of the content in the right column to keep the heights equal.
Brief Pause to Reply to your post #13.
Continuing…
This is one of three “mission” boxes in the right column:
<div class="missions">
<div class="icons-wrap">
<div class="info-icons-wrap">
</div>
The CSS for these containers looks like this:
.missions {
background-color: #fff;
display: table;
opacity: 0.9;
padding: 1em;
table-layout: fixed;
}
.icons-wrap,
.info-icons-wrap {
display: table-cell;
vertical-align: middle;
}
.info-icons-wrap {
width: 640px;
}
I propose the following changes to the CSS in the “missions” boxes:
.missions {
display: table;
/* table-layout: fixed; /* DELETE Me. */
width:100%; /* ADD Me. */
background-color: #fff;
opacity: 0.9;
padding: 1em;
}
.icons-wrap {
width: 1px; /* ADD Me */
}
.info-icons-wrap {
/* width: 640px; /* DELETE Me. */
}
To the foreground images, ADD the width=“”, height=“”, and alt=“” attributes.
<img src="images/target_icon.png" width="90" height="83" alt="target icon">
That takes care of the easy part of the issue.
The “missions” containers are separated by <br> tags. That’s poor form. It would be better if you used vertical margins instead. And you’ll need to add the same margin above the top “missions” box or the top of #statements-icons at narrow widths which can be done with the media query… but not if these two containers are changed to table-rows at narrow widths… that’s not cool.
#about-intro, #statements-icons {
display: table-row; /* NOT! Change to display:block at narrow widths and go from there. */
}
The CSS needs more work, but his is all I’m good for tonight.
The compete code for the image boxes is:
#ourteam figure:nth-child(2),
#ourteam figure:nth-child(3),
#ourteam figure:nth-child(4),
#ourteam figure:nth-child(5),
#ourteam figure:nth-child(6),
#ourteam figure:nth-child(7),
#ourteam figure:nth-child(8),
#ourteam figure:nth-child(9),
#ourteam figure:nth-child(10),
#ourteam figure:nth-child(11) {
padding: 0 15px;
}
The first-child is not included but should be here. You should not have to specify certain children if you apply the symmetrical padding.
#ourteam figure {
padding:0 15px;
}
Please see post #14 for code for the “mission” boxes.
so it was best for the boxes to be full width instead of placing fixed widths?
hmm I guess I need to explore more on the table method to use it properly…
for the queries purposes I needed to take out to center it with the rest of the content:
.icons-wrap {
width: 1px;
}
but it not let me do:
.icons-wrap {
width: 0;
}
so I had to say:
.icons-wrap {
width: 80px;
}
is that ok? seems weird though…
yeah I having trouble in my header as well among other issues…
width:auto would be better.
more later…
You need a mechanism to contain the margins in the “about-intro” and “statements-icons” containers.
style.css (line 408)
#about-intro, #statements-icons {
display: table-cell;
vertical-align: top;
overflow:hidden; /* ADD ME */
}
Looks much better in the narrow view.
I’d suggest that you start a new topic for issues concerning the header.
isnt this property used to hide things? it looks like it gave it more padding im not saying it is wrong but
I guess it is also use to hide content touching its respective box?