I am trying to build a dashboard for a web application. The requirements are for this screen to be responsive to the client screen in the following way:
Dashboard should hold 4 widgets (same size) in a row. The widgets should be distributed across the screen evenly.
When the minimum size of the screen does not allow all widget to be displayed (with minimal space between them) those widgets that cannot fit, should continue to the next line (flow).
Now i saw this post that answers the first definition but I could not find a way to enforce the flow behavior on it with the second idea. Does anyone has a clue of how it can be done?
You need to give your widgets a width and height and make them display:inline-block:
HTML:
<div class="widget">One</div>
<div class="widget">Two</div>
<div class="widget">Three</div>
<div class="widget">Four</div>
CSS:
.widget {
width: 100px;
height: 100px;
background-color: #ddd;
margin: 2px;
display: inline-block;
}
Live example here.
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
Disclaimer: I don't have any formal programming background, and I've been trying to mess with front-end design recently. Excuse me if my questions are trivial or misplaced (at least I didn't find clear answers in other posts)
I've been using Outsystems with responsive design framework to develop a web page. In order to profit from the responsive framerwork, I'm trying to make a web block that will look something like this.
Page layout
Inside a container with defined dimensions, I would insert a container (which will fit perfectly this parent container), containing other containers of its own. These 3 containers will always fill the parent horizontally, but will have heights according to the proportions I draw there (merely illustrative).
In order to fill the fixed-size parent, the main container would have to be set with height and width equal to 100% (at least I think so). However, the last child container (60%) may have its contents bigger than the appointed size (I put search results in there), so I tried setting 'overflow-y: auto'. However, that doesn't seem to work. From what I understood, that doesn't work because its parent has its height set to 100%, which isn't a defined size, so it ends up being considered as an undefined size when calculating the child containers size, and it ends up setting its height to 'auto' by default, which leads to visible overflow. I ended up changing the first two containers to have fixed sizes at the end (since they're inputs and they need to be at least visible for typing), however I just can't manage to make the last one fill the rest of the parent's container, while creating a scroll when necessary if its content overflow. What works is setting the parent container with 'overflow-y: auto', but I don't want it to work like this.
Is it possible to set chains of relative sized elements within another with .css or does it need to be alternated between fixed-size/relative-size to work? Would I need to use javascript to make calculations and set their heights at runtime?
Welcome to the world of CSS layout! Your question is quite good and have some really great depth to it. It's not quite clear what you need - exactly - because there are many techniques for variares scenarios it's better to read something on Flexbox and try to make a minimal code prototype with the problem you're facing when making the layout.
More about CSS flexbox (no need for a framework):
https://yoksel.github.io/flex-cheatsheet/#display
I made an example so you can see how it works:
.container {
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #92A8D1;
padding: 20px;
height: 600px;
outline: 1px solid black;
}
.c20 {
min-height: 20%;
background: #88B04B;
padding: 20px;
outline: 1px solid black;
}
.c60 {
flex: 1;
background: #6B5B95;
padding: 20px;
outline: 1px solid black;
}
/* not related to the answer */
body {
margin: 0;
min-height: 100%;
}
<div class="container">
<div class="c20">
hello world 20%
</div>
<div class="c20">
hello world 20%
</div>
<div class="c60">
hello world remaining %.
</div>
</div>
So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.
You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script
All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;
The issue is at: http://www.tenyeartwilight.com/
There is a jQuery slideToggle function on the second paragraph of the main section of the page (which is just a sandbox for me to learn). It works, but the enclosed text shifts from a left-align to a center-align and I can't figure out how and why, and I know this has got to be simple. The background corners change also, and I am not sure what's getting inherited/"de-herited".
I don't mind cruelty as long as I understand the solution. Thanks.
p.s. - the text is an excerpt copied from Inside the Microsoft Build Engine: MSBuild and Team Foundation Build by Sayed Ibrahim Hashimi and William Bartholomew.
EDIT: My web programming level should be pretty obvious from my question. I understand the broad strokes, but am still breaking down the details.
It is not only centered when it collapse. It is centered all the time. The reason why it looks like its centered is because the second paragraph got covered by left menu.
when it collapse, jQuery set the width of the second paragraph to a right amount which is just wide enough to show the left side of the ul.
Add this css to your code to see what i mean.
#nav{
opacity: 0.5;
}
EDIT: Responsive css and restructure for better readability
Move footer out of section. It's easier to manage and make scene to ours who read your code.So inside <body>you have
<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>
on the same level
Then in css you will have
#nav
{
width: 18%;
padding: 1%;
float: left
}
#section
{
width: 78%;
padding: 1%;
float: right;
}
I am wanting to build a Social network sharing module for a WordPress site that will look similar to this image below....
I can get the social counts for the number of times a page has been shared with JavaScript or PHP, haven't decided on which route I am going yet but as easy as it probably is, I need a little help with determining the Percentage to set the height in CSS for these networks shown below.
Can someone show me the basic math that will need to be performed to get the percentage for each social network so I can show the size of each, in proportion to the total number of combined shares on all networks.
The example image shows that this page has 221 shares across the 4 social networks. I will then have the number of shares for each individual network as well.
I will need to get a percentage for each network so I can set the size of the Div on that value.
This may not seem completely like a programing question but it is, all the math will be done programatically, I just know how to do all the other components already so no need to post that code now.
Here are the current values for the data in the image which is also confusing as it obviously adds up to much much higher than 100%...
Twitter: height: 89%;
Google+: height: 26%;
Facebook: height: 57%;
LinkedIn: height: 28%;
You just need some basic math, you want to show the percentage usage over all shares on social media. Nice Idea by the way. You will have to comulate all share actions over all networks.
like this:
Twitter: 5, Facebook: 3, LinkedIn: 1;
comulated: 9.
Percentages:
(5/9)*100 = 55.55%
(3/9)*100 = 33.33%
(1/9)*100 = 11.11%
Now that we know that, we can turn to our css. We know the percentage of each single element, but what can we relate that to? We need a new value. A height of an parent element for our social items.
Lets asume this html:
<div class="social-parent">
<div class="social-item twitter"></div>
<div class="social-item facebook"></div>
<div class="social-item linkedin"></div>
</div>
And this CSS:
.social-parent
{
/* this is 100% for the elements */
height: 300px;
background-color: lightgray;
}
.social-item
{
display: inline-block;
width: 30px;
background-color: blue;
margin-right: 10px;
}
We can now set the height of our elements relative to the height of the parent container. We can do this, like you said with php or javascript. Here is a very cheesy way to do it with JS:
var socialEngagement = {};
socialEngagement.twitter = "55.55%";
socialEngagement.facebook = "33.33%";
socialEngagement.linkedin = "11.11%";
document.querySelector(".social-item.twitter").style.height = socialEngagement.twitter;
document.querySelector(".social-item.facebook").style.height = socialEngagement.facebook;
document.querySelector(".social-item.linkedin").style.height = socialEngagement.linkedin;
Here is a demo of the result:
http://jsfiddle.net/br8rfpLm/1/
I'm working on a Wordpress project that features a glossary page with 3 columns. I'm trying to use Masonry to get all the entries to fit together nicely, which is almost working, but not quite.
Here's the page in question: http://ratherbrilliant.com/staging/starstruck/category/glossary/browse-A/
It's a usual Wordpress setup meaning that there are a number of articles nested in a container div.
<div id="glossary-content">
<article class="post">article content</article>
<article class="post">article content</article>
<article>article content</article>
</div>
The articles are percentage width and floated:
body.category-glossary article {
width: 26%;
padding: 0 3% 0 4%;
text-align: justify;
margin-bottom: 25px;
float: left;
}
I'm using just the the default Masonry setup, though I've tried all sorts of options to get it to work.
$('body.category-glossary #glossary-content').masonry({
itemSelector : '.post',
});
It's almost working, but if you scroll down, you'll see a giant gap between the first entry and the one below it. I simply cannot get this to work. Any help would be greatly appreciated.
Thank you!