This is just a longer text to demonstrate multiple lines being centered.
Give this a try:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
body {
font-family:'Open Sans', sans-serif;
font-size: 1.2em;
font-weight: 700;
}
.box {
width: 25%;
height: 0;
position: relative;
padding-bottom: 25%;
overflow: hidden;
float: left;
background-color: #9c9;
color: #fff;
text-shadow: 1px 1px #666;
box-shadow: 0px 0px 1px 1px #666;
border: 2px solid;
margin: 1%;
position: relative;
}
.box.ratio2_1 {
padding-bottom: 12.5%;
}
.box > div {
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
-moz-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
top: 50%;
position: absolute;
text-align: center;
width: 100%;
}
Source of inspiration
Upon viewing the example you provided, it's evident that the aspect ratio is preserved by scaling down the fonts as the browser window is resized.
This is accomplished through the utilization of css media-queries to apply different css properties based on varying viewport sizes.
The specific media queries employed in the showcased site with corresponding css alterations are outlined below:
@media screen and (max-width: 1000px)
{
body#innen article div.center
{
width: 100%;
margin-left: 0px;
}
body#innen article h1
{
margin-left: 0px;
margin-top: 200px;
}
body#innen article summary
{
margin-left: 0px;
width: 100%;
}
}
@media handheld and (max-device-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 780px)
{
body#innen article h1
{
margin-left: 0px;
margin-top: 200px;
}
body#innen article summary
{
margin-left: 0px;
width: 100%;
}
body#innen article div.center
{
width: 100%;
margin-left: 0;
}
.content
{
padding: 3px;
}
.content, .content span
{
font-size: 10px;
text-transform: none;
}
}
In the second media query, you'll notice the font size reduction to maintain the container's ratio, along with a decrease in padding.
Furthermore, observe how in your fiddle example, the first box retains its ratio until a very narrow width due to minimal text content. While I could assist in adjusting your fiddle, specifics on desired text resizing or media query parameters are needed. Nevertheless, this approach is recommended for achieving the desired outcome.
Consider this scenario: We are dealing with a file upload page where we aim to avoid reloading the entire page upon completion of the upload process. To achieve this, we have enclosed the form within an iframe. The form within the iframe posts to itself an ...
Is there a way to move the 0 line on the y axis to the bottom of the chart when all values are 0? I attempted the solution provided in this post without success. Highcharts: Ensure y-Axis 0 value is at chart bottom http://jsfiddle.net/tZayD/58/ $(functi ...
I am in need of creating a seating chart. I have generated an SVG with the seats. <div class="seats-map"> <svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300"> <g data-row ...
I am having an issue with rendering a template that contains the following code block: <% if(type === 'Not Within Specifications'){ %> <% if(Length !== undefined) { %><h5>Length: <%= Length %> </h5> <% ...
<Container style={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Container> <Container sx={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Cont ...
I am trying to retrieve data from a MySQL database using node (routes.js) and have the results injected into club.html, which is then dynamically updated in index.html using ng-view. However, it seems that the JSON response from node is displaying directly ...
I've been experimenting with Raphael.js recently and I've encountered an issue related to the positioning of each Raphael object. My goal is to create multiple 'canvases' without having them overlap within a predefined div on the page. ...
I'm encountering an issue with my calculator created in create-react-app where the numbers are overflowing off the screen. Specifically, when inputting very large numbers like 11111111111111111111111111111111, they exceed the output container. I am lo ...
I have a variety of module rows that allow users to manage access rights by selecting specific options. My goal now is to extract the checked boxes from these checkboxes with the name "config{{$field->id}}". Below is the current functioning code. HTM ...
I found a captivating animation on this website: http://codepen.io/jschr/pen/GaJCi Currently, I am integrating it into my project. #content { position: relative; margin-left: auto; margin-right: auto; width: 1000px; height: 700px; } ...
How can I make my sidebar button change color when I navigate to the page it links to? ...
Could you assist with the code snippet below? I have a form where each dropdown list depends on the selection above it. Based on the user's selection, the appropriate data should display in the subsequent dropdown list. I am trying to make dropdown l ...
When a user logs into the system, there is a radio button that is almost checked. I want to create an alert when the user clicks the button to show whether it is checked or unchecked. This is the HTML code for the radio button: <input id="radio1" name= ...
I'm currently using TextMate to work on my HTML projects. When I select View > Wrap > 79 characters for certain types of content, it wraps at 79 characters as expected. But when it comes to working with HTML, this feature doesn't seem to ...
NOTE: Each email ID must be unique. An empty string value is allowed to be added. Email IDs should be separated by semicolons and commas. Basic validation of email IDs is necessary for entry. [![ $("#d-notification").focusout(function () { var ...
My goal is to create a looped row of elements, similar to this design: https://i.sstatic.net/7cC2z.png This row should function like a carousel where clicking the "Next" button changes the current element and positions it in the center of the row. I envi ...
I am exploring the use of an HTML Diff Tool in PHP, specifically looking at this one: https://github.com/rashid2538/php-htmldiff. I am fetching the content of both pages using cURL and passing it to the HTML-Diff tool. It works perfectly fine, but there is ...
I am facing an issue with a table where I need the first column to remain fixed when scrolling horizontally. The code snippet below works perfectly for the first column of td's, but fails to work for the tr's. Despite checking the code thoroughly ...
I'm struggling to understand the logic behind adjusting the number of images displayed on my page. I can't seem to select the first option (5) from the dropdown menu. No matter what I choose, it always defaults to showing 10 images. This issue ...
Is there a method to use CSS to create a green shadow in that particular shape? ...