Is it possible to set up a rotation percentage for a specific item?

As shown in the GIF below, when adjusting the window size, the image on the left grows and shrinks as intended. To achieve this effect, I placed a line inside the "image wrapper" that aligns with the text block on the right. Currently, the line is positioned absolutely with percentage values for left and top. Is there a way to rotate the line to ensure it lines up with the title consistently, regardless of the image size? Can rotation be done using percentages? (I doubt it)

One concern is browser compatibility. While a CSS-only solution would be preferred, a JavaScript alternative could work too, but I'm unsure how to implement this with JS.

Any additional suggestions are appreciated.

GIF Example: https://i.sstatic.net/QMW4n.gif

Example code used: https://jsfiddle.net/01sxrjkr/ *Ensure the preview window is less than 768px

javascripthtmlcss

Answer №1

Instead of rotating from the wrong end of the line, consider adjusting the rotation degrees using media queries to ensure responsiveness across different screen sizes. It's important to remember that people don't typically resize their screens to perfection at every pixel width, so focus on creating a layout that adapts well to common media widths. Your image is responsive while your text is not, causing the left column to decrease in height as the image shrinks and the right column to increase in height as more text wraps.

.line.line-1 {
    left: 62%;
    top: 39%;
    transform: rotate(14deg);
    width: 40%;
}

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

Eliminating the Skewed Appearance of Text in Input Fields Using CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Customized Page Layout</title> <script src="https://c ...

javascripthtmljquerycss

Enable the Angular button only when the radio button has been selected

Just starting out with Angular and I have a query. This is a scenario for my project at work. https://i.stack.imgur.com/R3SxA.png In this screenshot, I want to enable the "ajouter" button when at least one radio button is selected in the secure chest (s ...

htmlangulartypescript

Is it possible to implement the 'opacity' feature on the homepage of my HTML website?

I am currently working on my website and I would like to display a notice to members when they open the site. This notice should only appear once, right above the HTML homepage, as the homepage content may vary for different members. I plan to use 'op ...

htmlcssopacityopacitymask

Text positioned in a fixed location

How can I ensure that the main content stays on the right side of the sidebar without adding margin-right? Currently, the sidebar is being covered by the body content due to its fixed position. Is there a solution to prevent this issue? .App { displa ...

htmlcss

The sequencing of AJAX calls on the server side may not necessarily match the order in which they were initiated on the client side

I am working on an ASP.NET MVC application that includes a JavaScript function within a view. Here is the code snippet: function OnAmountChanged(s, fieldName, keyValue, url) { console.log("Get Number: " + s.GetNumber()); console.log(" "); ...

javascriptajaxasp.net-mvc

Setting up Webpack for ES6 modules

Just dipping my toes into ES6! After completing all the webpack installation steps, I excitedly started creating some files following this picture https://i.sstatic.net/LYXCy.png Once I moved on to writing code in index.js and tried running it with the ...

javascriptnpmecmascript-6

Ensure that the mask implemented in the form input only shows two decimal places, while simultaneously retaining the original value

Is there a way to format a number in a form input so that it displays only two decimals while still retaining the original value? This is necessary to avoid incorrect values down the line and meets the customer's requirement of showing no more than tw ...

jqueryhtmlcssformsinput

Exploring the capabilities of utilizing filters within a ternary operator in AngularJS

Can a filter be applied to a variable in the template within a ternary operation? <img ng-src="{{ image_url && image_url|filter:"foo" || other_url }}"> In this scenario, the filter is custom-made and I prefer not to alter it to accommodate ...

javascriptangularjsternary-operator

Position text on the background image without using positioning techniques

I need to center my text precisely on top of my background image without resorting to the use of relative or absolute positioning. Many solutions online rely on using absolute positioning for the text along with a specified top value, but I prefer not to e ...

htmlcsscss-position

The jQuery UI Tab is failing to scroll within its container

Scenario : I am facing an issue with a scrollable container in IE8. The containing div is supposed to be scrollable and it holds my jquery UI tab div. Issue: While scrolling the container in IE8, other content within it also scrolls, but the jQuery UI t ...

javascriptjqueryjquery-uiscrolljquery-ui-tabs

Can the w regular expression pattern be modified to include special characters like é? If not, what other options are available?

Imagine having a regular expression that appears as follows: \w+ In this case, the string "helloworld" would be accepted: helloworld However, "héllowörld" would not pass the test: héllowörld The regex will stop at é (and also break atö) ev ...

javascriptregex

Javascript added link padding not functioning correctly in Internet Explorer

After attempting to find a solution on my own, I've come to realize that this situation is quite unusual. The issue at hand involves adding a class to a link using JavaScript (specifically jQuery, although the framework may not be relevant in this ca ...

javascriptcssinternet-explorer

What could be the reason for the absence of the image prop in JSON data within [gatsby-plugin-image

Purpose: Retrieve and display JSON data containing image paths, titles, descriptions, and alt attributes using GraphQL. While title, description, and alt attributes are successfully rendered, there is an issue with displaying images. The console log indica ...

javascriptreactjsjsongatsbygatsby-image

Challenges with JavaScript setInterval

Hello everyone! I'm currently working on running a loop with setInterval, but I want each element in the array to use a random interval instead of the entire array doing so. Below is the code I have been using: setInterval(function() { for ( ...

javascripthtmlloopsintervals

Tips for Quickly Filtering a Large JSON Dataset in ReactJS

I am currently working with a large JSON dataset that looks something like this: [ {"date":"2020-03-02", "state:"Delhi", "district":"East Delhi" ..... ..... } ..... ..... ] I have a variety of filters avail ...

javascriptjsonreactjs

Using Bootstrap to shift columns

I've been attempting this task with no success. My goal is to create 5 columns within Bootstrap, each with a width of "2". I also want to add an offset of "2" between the second and third columns. The desired outcome would be: 2 Width Pricing Table - ...

htmlcsstwitter-bootstrap

HTML - Emphasize the importance of CSS styling

I am working on an HTML file that is loading two stylesheets: Bootstrap style (bootstrap.css) Custom app style (site.css) The code in bootstrap.css currently looks like this: .modal-open .modal { overflow-x: hidden; overflow-y: auto; } How can ...

css

Ways to call a method in a subclass component from a functional parent component?

In my redux-store, I have objects with initial values that are updated in different places within the child component. As the parent, I created a stateless functional component like this: const Parent = () => { const store = useSelector(state => s ...

javascriptreactjsreact-reduxreact-hooks

Tips on incorporating data from a JSON file into a dropdown list on an HTML page using AJAX and JavaScript

Looking to extract data from a JSON file and populate two dropdown lists in HTML using AJAX and JavaScript. The goal is to have the data displayed in the first dropdown list, and when an option is selected, the related data should be shown in the second dr ...

javascripthtmljsonajax

Constantly loading image with Meteor HTTP request

Within my Meteor application, I am attempting to dynamically load a random image from an API which returns JSON data structured like this: { "id":2026 "url": "https:// ... " , "large_url":null, "source_id":609, "copyright":"CC0", "site":"unsplash" } ...

javascriptjsonimagemeteor