Reactjs – Responsiveness in different monitors
I have a React app that I created following a design for 1920X1080. on 27inch / 24inch/ 13inch leptop the app looks great. but if I render the app on a 34 inch wide screen half screen for example, the…
Css – How do I create a page that is responsive based on height not width?
I am trying to create a very simple page for a game that I will embed using an iframe. I want the responsiveness to function exactly the same as this page: https://rajeevbasu.com/projects/wil3d/index.html In this above example, the game and text…
My HTML or CSS prevents me from scrolling down on mobile sized screens
The title pretty much says what my issue is. I did a few google searches and couldn't find anything helpful so I came here. Here is the link to the site: https://aquamarine-catharina-45.tiiny.site/ I changed from ".container" having the properties: position:…
Html – Button Dropdown Feature
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:…
Html – Why do my CSS media queries not work on all mobile devices?
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.…
Html – Text causing CSS grid column to extend beyond the websites dimensions?
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…
Create a Horizontal repeating Chain structure design using HTML/CSS
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…
creating a custom organization chart layout using HTML and CSS
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.…
Html – Font-size becomes too big when browser width is reduced
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…
Css – Responsive Bootstrap Button according to screen sizes
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>…