Html – Responsiveness on website image container
I am using Bootstrap 5 to create a website and in my feature and mission sections I want the images to move above the text when the viewport is mobile or tablet size, but I am not sure how to…
Html – Setting Media Query for iPad Air and iPad Pro
I am stuck in setting the media query for different iPad devices. In my next Js code, I have created three cards (or divs) equally divided in a row (react-bootstrap grid system used for it). The cards can take up…
Css – Why when use align-items, it changes the size of one of the flex items?
I used flex box for the responsive design. I did not change size of each flex-items. However, when I applied align-items:center, it changes the size of first flex item(PICTURE 2) when it is display in vertical view. However, PICTURE 1…
Html – How shall I make a single sidebar button for open and close as well?
Here I'm designing a website clone, I've done most of the part, I wanted to make this website responsive for different devices, all that part is just done, but I want a single sidebar button for open and close, like…
Fixed Width vs. MediaQuery to achieve responsive Design in Flutter?
I'm working on a Flutter project and want to ensure that my UI is responsive across different screen sizes. I'm a bit confused between two approaches for defining the width of elements, such as buttons. I would appreciate some guidance…
Css – Media queries go into effect on strange values
this is my media query as i try to make my react app responsive. @media screen and (max-height: 800px) { font-size: 65px; .shuttleObject{ width: 90%; } } } The thing is, when i try to change the height and width…
Html – How to make text inside hero image responsive?
I'm trying to build a responsive website using Bootstrap, which is totally new to me. I want to make a hero image with a text inside positioned right in the middle. As my background image resizes, my text just stays…
Html – How to divide three <div> vertically in a 20:50:30 ratio using flexbox with full height of screen?
I want to make a mobile first responsive layout using flex where three sections are divided vertically in 20:50:30 ratio with full height of screen. This the HTML part: <body> <main> <div class="parent"> <div class="topSection"> This is Top Section </div>…
Html – Issue with a function in my mobile friendly website
I am coding this website for a friend, and she wants the background colour of the textbox to go all the way to the edge, whilst the actual text stays slightly away from the left edge. This I have coded,…
Html – I don't know why my site is not responsive
I'm a beginner in HTML and CSS and i'm working on a project on frontend mentor. The name of the project is Order Summary Component and I have submitted the project already but the issue is that my project isn't…