Creating a dynamic rectangular design with a taller height than width, featuring perfectly centered content

My website needs a responsive rectangle where I can easily adjust the height and width. However, when I try to rotate the rectangle, the content also rotates 90 degrees. Can anyone help me with this issue?

Thank you in advance for any assistance.

Snippet of code:

.project-pill{
  border: 5px solid red;
  position: relative;
  text-align: center;
  width: 35%;
  transform: rotate(-90deg);    
}
.project-pill::after{
  content: "";
  display: block;
  padding-bottom: 80%;
}
.project-pill .content{
  position: absolute;
}
<div class="wrapper-project">
    <div class="project-pill">
        <div class="content">

        </div>
    </div>
</div>

htmlcss

Answer №1

To create a responsive rectangle or square, the recommended approach is to use the padding-top property.

*Ensure your code is responsive instead of having a fixed height*

The width of the rectangle will adapt based on the parent's width, while the height will be set at 150% of the parent's width.

Take a look at the following code snippet:

.rec{
  position: relative;
  background: red;
  width: 100%;
  padding-top: 150%;
}

.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="rec">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem rerum illo delectus laborum reiciendis atque et aperiam vitae, vel alias quia cum eaque corrupti. Ad tenetur consectetur perferendis consequatur illum?</div>
</div>

Answer №2

My understanding is that you are looking for a box that is taller than wider, is that correct?

If so, there are a couple of ways to achieve this. The first option is to set the height greater than the width in your CSS: 

.project-pill{
  border: 5px solid red;
  position: relative;
  text-align: center;
  width: 35%;
  height: 200px;
}

.project-pill .content{
  position: absolute;
}

.wrapper-project{
  position: absolute;
  width: 50%;
  height: 50%;
}
<div class="wrapper-project">
    <div class="project-pill">
        <div class="content">

        </div>
    </div>
</div>

Alternatively, you can rotate the content in your preferred way. Though I'm not sure why rotation would be necessary in this case.

.project-pill{
  border: 5px solid red;
  position: relative;
  text-align: center;
  width: 35%;
  transform: rotate(-90deg);    
}
.project-pill::after{
  content: "";
  display: block;
  padding-bottom: 80%;  
}
.project-pill .content{
  position: absolute;
  transform: rotate(90deg);   
}
<div class="wrapper-project">
    <div class="project-pill">
        <div class="content">
Hello
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

javascriptcss

I am having issues with the external CSS and JS files not functioning properly in my project

I'm currently working on a project that has the following file structure: However, I am facing issues with loading my CSS and JS files... <link rel="stylesheet" href="./css/main.css"> <script src="./js/main.js" ...

javascriptphpcssurlserver

Move the cursor over the text to reveal an image

Hello, I'm trying to replicate the same animation effect as seen on these websites: and . Specifically, when hovering over the "selected works" section, an image is displayed. I suspect it's using a JavaScript library, but I can't seem to i ...

javascripthtmlcssanimation

Enable automatic indentation for wrapped text

I'm still learning the ropes here, but I'm looking to have text automatically indent when it's wrapped. Instead of this: Peter piper picked a peck of pickled peppers. It should look like this: Peter piper picked a peck of pickled pepp ...

csstextformatting

Sending Data in Angular JS

Looking for guidance on Angular JS as a newcomer. I have set up a form on my index.html page, and when the user fills in the details and hits submit, I want it to redirect to a details.html page where all the filled-in information can be displayed. HTML ...

javascripthtmlangularjs

Fixing the height of the body padding with JS or JQuery for a

I have a rather straightforward question that pertains to an issue I am facing while building a website using BS4. Specifically, my problem revolves around a fixed-top navbar with the class "fixed-top". The challenge stems from not knowing the actual heig ...

javascriptjqueryhtmltwitter-bootstrap

Struggling to implement a vertical scroll bar within a nested div element

Struggling to make a scroll bar appear in the box-content div, even after adding 'overflow-y:auto'. My specific requirements are: The entire layout should adjust according to the browser height. This is why I've set #wrap { ... height: 50 ...

cssoverflow

Eliminating unnecessary CSS classes

There are multiple references to the specific ".wiki-content" class in the stylesheet: .wiki-content ul,.wiki-content ol,.wiki-content dl { padding-top:0; margin-top:0; } .wiki-content a,.wiki-content a:link,.wiki-content a:visite ...

csshtml

Guidelines for calculating the CRC of binary data using JQuery, javascript, and HTML5

Can you please assist me with the following issue? Issue: I am currently reading file content using the HTML5 FileReaderAPI's ReadAsArrayBuffer function. After storing this buffer in a variable, I now need to compute the CRC (Cyclic Redundancy Check) ...

javascriptjqueryhtml

Issue Encountered While Trying to Upload File Using Ajax

I have been encountering an issue with uploading a file using Ajax. My goal is to upload a single file only. Below are the snippets of code that I have utilized. HTML & Ajax $(document).ready(function(){ $("input:submit").on('click', func ...

phpjqueryhtmlajax

Updating the value of an Angular select on change is not being reflected

If the select element is changed, the value should be set to something different from what was selected. There's a feature in place that only allows 4 item types to be selected at a time; if more than 4 are chosen, the value reverts back to its origin ...

javascripthtmlangulartypescriptangular6

Finding the location of an "Apply" button on an Angular HTML page

There is an issue with the positioning of the apply button in the filter bar. Sometimes it displays in the next row instead of alongside the other filters. How can I determine the exact position of this apply button within the HTML page? <div class=&quo ...

htmlcssangularbuttonposition

HTML code now launches in the existing electron window rather than opening a new window

<html> <head> <title></title> </head> <input type="button" name="new" id="newmon" value="new"> <button onclick="open1()">monitor 1</button&g ...

javascripthtmlnode.jselectron

Having difficulty in setting a Cookie with php

Working on integrating social login, I attempted logging in with Facebook. Upon successful authentication of the user, I aim to retrieve their value and store their ID in a cookie to establish a session throughout the site. Below is the code snippet, < ...

phphtmlcookiessetcookie

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option. This is what I attempted in my app.component.ts and my.component.ts files: Here is t ...

htmlcssangulartypescript

What is the best way to ensure that all the responses to questions in HTML yield a singular outcome?

Can you help me figure out how to link all the answers to questions or user preferences to one ultimate result? I love how Craigslist guides users through their preferences to lead them to one specific outcome. For example, how can I connect these two ques ...

html

Ensure the column breaks before the element without disrupting the wrapper in CSS

My objective is to always initiate a line break before a specific element, in this case, the h2 tag: https://jsfiddle.net/hv0sm40o/3/ html <div class="columns"> <h2>Jelly pastry chocolate cake pastry</h2> <p> Marshmallow cake pie ...

htmlcsscss-multicolumn-layout

Maximizing the width of an absolute div element inside a container

Looking at this demo, you'll notice that the header remains fixed. However, my issue lies in getting the absolute <div> inside the <th> to occupy 100% of the width of the <th> When I set width: 100% for the <div>, it expands t ...

htmlcssfixed-header-tables

Creating time input forms that are responsive can be achieved by leveraging the features of Bootstrap

Currently, I am working on a Laravel project and I am facing an issue with making a form responsive. I have added the following viewport meta tag, but I have not seen any changes. Any suggestions on how to make this form responsive would be greatly appreci ...

htmlcsstwitter-bootstrapbootstrap-4responsive

Utilizing the power of SimpleHTMLDom to retrieve high-resolution images through an advanced Google search

I want to display a large image that was retrieved from Google using simple_html_dom.php include_once( "simple_html_dom.php" ); $key="unique"; $html = new simple_html_dom(); $html=file_get_html('http://images.google.com/images?as ...

phphtmldom