I wanted to build something like this →
Row 1 has arrangement that first item will occupy 50% of the width.
second, third… row will have items of equal width.
How should we proceed?
Should we do this with flex? or JS will be needed.
As much as it pains me to say it, no JS will be needed.
You could do this using Bootstrap or any of the other frameworks out there (that’d be my approach), but I’m sure one of the CSS gurus will be a long with a vanilla solution soon.
3 Likes
No bootstrap. That is an old school.
Lol. No it isn’t. It’s a great toolkit! I’m not saying that it’s a good solution for everybody 100% of the time, but (for example) it’s brilliant for prototypes (getting a complicated layout put together quickly) and it comes with a whole slew of CSS/JS utilities.
3 Likes
At times it is like using machine gun or using inter continental ballistic missile when a small needle can do the job.
A tad hyperbolic, but ok. It’s simply a matter of choosing the right tool for the job. And to be fair, if you’re unsure as to whether you need JS to style a page’s layout, it might be a better choice for you than you think.
4 Likes
In poetry and writing some times we use exaggeration to make life more fun, exciting, and tasteful - Hyperbole was used to make it playful nothing to offend anyone.
3 Likes
Hi,
What you describe could be achieved with less code in css than in javascript, I think. 
To my eyes, your description of the goal says more than your image does. Usually it is the other way around. 
wanted? Y’all have changed your minds? What do y’all want to build now?
Surely youse have learned how to start a page by now. Are you’uns taking an HTML and CSS class or is this for a client?
hyperbolic cat on the loose.
2 Likes
I do not have any client so far. I am self tutoring with the help of every one here.
1 Like
what does this means? Is it a English language slang or a sarcasm. I could not figure out the hidden meaning.
I have written JavaScript code to style HTML. But it has (almost?) always been for working with HTML that was not my own and that I had no control over. i.e. userscripts and browser extensions.
For HTML code that is my own, when something can be done using CSS without JavaScript, that is the approach I take. So if I wanted to have a page that had
50 %, 25%, 25%
25%, 25%, 25%, 25%
that when a narrow viewport changed to
100%
50%, 50%
50%, 50%
I think flex with media queries would be much preferred over using JavaScript to change the DOM
4 Likes
Very insightful. If I go with flex then the first row is a challenge in mind how to execute that. I am unable to conceive the code for the first row. the item of the same dimension will come from a WP loop later.
Thanks.
Hi there codeispoetry,
here is a basic flex example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
.container {
display: flex;
justify-content: space-around;
width: 100%;
padding-bottom: 0.5%;
}
.container > div {
width: 24.5%;
padding: 1em;
border: 1px solid #999;
box-sizing: border-box;
background-color: #fff;
}
.cell3 div:first-of-type {
width: 49.5%;
}
.container > div div:nth-child(1) {
width: 100%;
padding: 1em;
box-sizing: border-box;
background-color: #eee;
}
</style>
</head>
<body>
<div class="container cell3">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
<div class="container">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</body>
</html>
I haven’t included “@media” as yet, as your requirement for that was unknown.
coothead
7 Likes
It’s a flowery way of saying “wild cat”, in this case one who enjoys plays on words.
“I wanted…” or “I want…” ?
“How should we proceed?” ?
“We” or “I” ?
Bootstrap is not “old school”. It’s a framework.
I assume your page is supposed to be responsive, but you have not shown how it is to change.
After a year of receiving excellent, detailed explanations of methods and rationale for using HTML, CSS, and JS where needed, your question is very elementary and it has been answered several times before in your previous threads. Thus I ask if you are taking an HTML and CSS class?
We are very glad to help people who are trying to help themselves and have run into a snag.
Personally, I think you need to take a formal HTML and CSS class from an educational institution. And plan to spend all the time necessary to experiment with the elements and rules that you learn so you can envision how they can be applied in other situations and how to test them.
Just my 2 cents
2 Likes
Yes, an incorrect grammar. I am not a native speaker of English so sometimes in haste I write incorrect grammar.
Here’s an old example I just swapped around but could be tidied up a bit.
As with cootheads version you will need to use media queries for smaller view as required.
4 Likes
No, grammar is not a problem.
Past tense vs present tense is a common mistake made by many native english speakers. In casual speech, no one would give it a thought. It sounds a little odd from a person with your education, but that’s all. No biggie.
“How should we proceed?”, suggests that you are calling to us to embrace you as a friend or partner in your journey to learn HTML and CSS. In this case, someone should join with you and tell you how to write your web page using techniques that have been explained several times before. You claim that you are self-tutoring with our assistance, but after a year, I find myself looking for evidence of learning?
We are happy to help anyone through difficulties with their code or planning processes; but we are not meant to be a substitute for a formal course and self-imposed “homework” or practice experiments. Learning, in other words.
1 Like
Sir, In your examples the height are same, but the first item in the first row has twice the height of the rest of the items. I tried changing few things, but could not control that.
(I was not so good in grammar previously, but when I prepared for GMAT test few years back I improved a lot then.)
Make sense. One should not take for granted the help that is available free of cost. I will try more before posting. Thanks for the words of wisdom. Its like soldiers who sweat more during the training - bleed less in the battlefield.
Sometime I find you harsh(previously), but you have nice intentions. Thanks.
3 Likes