Achieve full height of parent with rotated text

Hey, I've been experimenting with some CSS transforms and I'm having trouble getting this to work properly.

Check it out here

I'm using Bootstrap 4 to create two columns; an image on the left and text on the right. I want the text to be centered vertically and displayed vertically, so I used:

transform:rotate(90deg)

on the text and added:

align-items: center;
text-align: center;

to the column itself. The issue is that on mobile devices, the text breaks into multiple lines instead of staying in one vertical line.

htmlcssflexboxbootstrap-4

Answer №1

Make use of the convenient text-nowrap class to prevent text from wrapping onto multiple lines.

<div class="container">
    <div class="row mt-5">
        <div class="col-9 ">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1521818372696-23e67aff37a5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b42f31aba73642725afa0a222d211542" alt="">
        </div>
        <div class="col-3 d-flex align-items-center justify-content-center">
            <p class="rotate text-nowrap">Azurmendi by ENEKO ATXA</p>
        </div>
    </div>
</div>

Check out this CodePen link for reference

If not optimized for text resizing, there may be unintended consequences on mobile devices.

Helpful Resources

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

Utilizing Node.JS Nodemailer for sending emails with extensive HTML code

I am encountering an issue. I am working with Node.JS nodemailer. const url = `${url}`; var mailOptions = { from: 'stackoverflow', to: email, subject: 'test', html: 'Please click this email to confirm your email: &l ...

htmlcssnode.jsnodemailer

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

htmlcssbem

Dash that serves as a barrier between two words to avoid them from breaking onto

Is there a way to keep a dash ( - ) from breaking a word when it is at the end of a line? Similar to how &nbsp; prevents a line break between two words. The issue I am facing currently is with a dynamic blog post that includes the word X-Ray. Unfortun ...

html

Link HTMLMediaElement with Android's playback controls

For my HTML/Javascript audio player that supports playlists, I have implemented a feature where the ended event automatically plays the next media in line. Everything works smoothly when using the player on Android Bromite browser, including the playback c ...

javascriptandroidhtmlmediaelement

I am interested in designing a navigation bar with varying background and hover colors for each individual block

I need help creating a navigation bar with different background colors and hover colors for each block. I can do this separately but not together, so please advise on how to combine both in the li class. Below is the code for the navigation bar: header ...

htmlcss

Explore our product gallery with just a simple hover

I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...

javascriptjqueryhtmlcss

Avoid the CSS ::before content from being highlighted

I have implemented the ::before pseudo-element for my ordered and unordered lists in my application. However, I am facing an issue where only the ordered lists are highlightable, and I am unable to change the highlight color to match the overall look of my ...

htmlcsssasswebkit

Using JavaScript to display content on the screen

As a newcomer to Javascript, I'm looking for a way to display my variable on the webpage without utilizing <span> or innerHTML. var pProductCode = $('[name=pProductCode]').val(); $('input[id*="_IP/PA_N_"]').each(function(i){ ...

javascriptjqueryhtml

Ensure that the flex item spans the entire width of the page

I'm struggling to make my audio-player resize properly to fit the full width of my page. I can't seem to figure out what I'm missing or doing wrong... (Current Look) https://i.sstatic.net/tEtqA.png I'm attempting to utilize HTML cust ...

javascriptcssjsonflexbox

Steps to position an image without a background in the middle of a smaller container:

My HTML includes the following code: <div style="width:400px;height:300px;overflow:hidden;"> <img src="http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg" /> </div> Take a ...

css

Achieving Perfect Table Alignment with Bootstrap Framework

I have updated my static website to include a payment gateway with a custom Paypal button. However, I am facing an issue where the table containing the button is not aligning center on the support page like the rest of the content. Here's a snippet of ...

htmlbootstrap-4alignmenttext-align

Need to transfer a variable from the left side to the right side within Javascript. The instructor demonstrated using up and down as an

Recently started learning JavaScript as part of my college game programming course. I am only using Notepad for coding. Currently, I am trying to move an object (in this case, just the letter "o") from left to right on the screen. My professor has provided ...

javascripthtml

Tips for keeping a Bootstrap Modal in a fixed position on the screen as you scroll

I am facing an issue with a button that is supposed to trigger a Bootstrap Modal. It seems that the modal is not visible when the page has been scrolled down. Upon clicking the button to show the modal, the background darkens as expected, but the modal its ...

javascripthtmltwitter-bootstrap-3

Exploring the ancestors of an element

JS <script> $('.btn').click(function(e){ target = e.target; parent = target.parentNode.parentNode; console.log(parent); }); </script> HTML <div class="card" sty ...

javascriptjqueryhtml

Customizing the CSS for individual posts in WordPress based on their post

I am interested in establishing a unique look for each individual post on my wordpress.org blog. Is there a way to customize the CSS code of individual posts without changing the design of other posts? I have tried using categories to create a new PHP fi ...

phpcsswordpresspost

jQuery: Select the parent element of a focused form input and apply styling

Recently, I encountered a situation where I have a form containing a DIV along with 3 INPUTS, each enclosed within a LABEL element. My goal is to alter the background image of the DIV whenever an INPUT receives focus. Due to limitations in navigating up t ...

jquerycssfocusbackgroundselector

When inserting the HTML of a webpage into an iframe, the displayed content may vary slightly from the original page

I am facing an issue with my webpage where I extract the html, transmit it via websockets using socket.io to another page containing an empty iframe, and then inject the html dynamically into the iframe. My code for injecting the html looks like this: fr ...

jquerycssdebuggingnode.jsiframe

CSS uses color parameters in the same way

Apologies, I spent a few years immersed in the world of IT. Now, onto my query: I have a lengthy ".css" file with numerous structures like color: #567567; within it. Is there a way to utilize a construction similar to color: $mycolor or is this not po ...

css

How can you adjust the dimensions of a child div?

Hey there! I've got a div called bat. #bat{ width:50%; height:50%; } Here's the HTML: <div id="bat">dynamic div will appear here</div> When dynamic content is placed inside the div and it's larger than #bat, th ...

jquerycss

What could be causing site container not to respond to height:auto?

I have encountered an issue while developing a website using absolute height values. I am puzzled as to why the height:auto property is not working for me. Can anyone provide some insight on this? HTML Structure <div id="site-content"> <div id=" ...

htmlcssheight