I have the following code: document.querySelector('.rectangle') .addEventListener('click', function() { this.classList.toggle('expanded'); const plus = this.querySelector('.plus'); plus.style.transform = this.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)'; }); .tile-container { padding: 5px; font-size: 25px; } .rectangle { background-color: #0051a5; padding-right: 1em; padding-top: 1em; cursor: pointer; border-radius:…
I am attempting to use CSS media queries to change the appearance of my website on mobile and smaller screen sizes, but only some devices (some phones work, others do not) actually use the media query styles that I've defined.…
So the text in this content column for CSS Grid is causing it too expand beyond the websites dimensions, i've tried using text overflow, text-wrap etc... to fix it but nothing seems to be working, what's causing it? because visually…
I am currently creating a repetetive horizontal chain like structure in HTML and CSS. I am able to wrap nodes to next row using flex-wrap but I am unable to insert connection line between 3rd node and 4th node. How…
I'm trying to create a custom organization chart layout using HTML and CSS, but I'm facing some difficulties in achieving the desired layout. I've provided my current code below, along with a brief explanation of the layout I'm aiming for.…
I am having a hard time with responsive text sizes: <header class="toolbar"> <h1>TITLE</h1> </header> I have font-size:2.4rem. The font-size is perfect for laptop browser but it looks very small on my mobile phone browser. I realized that I need atleast…
I would like this button to be responsive, automatically adjusting its size to fit various screen dimensions. In this following code button is fixed and not moving. Here is the code. <button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened" (click)="open()">Login</button>…
I want to create a list using HTML & CSS shown as below: Expected Output: But getting below output. Actual Output: As you see, the line is collapsing on text and numbers. I want text besides of vertical line. And…
I am using Bootstrap 5 to make a website and I am trying to make the header image of the website responsive using media queries. I like the way it looks on desktop, laptop, and tablet viewports but on mobile,…
I am using Bootstrap 5 to make a website and I am trying to make the header image of the website responsive using media queries. I like the way it looks on desktop, laptop, and tablet viewports but on mobile,…