I've been working on building a website and I thought using percentages for sizing would make it responsive to window changes.
However, the site is still acting oddly and not resizing correctly. Can anyone shed some light on why this might be happening and offer some solutions?
Here's the code: http://pastebin.com/JUB6Zvri
Utilize the left, right, top, and bottom properties instead of margin for enhanced styling.
Observe the adjustments made:
<!DOCTYPE html>
<head>
<style type="text/css">
html {
height: 100%;
background-color: #272C34;
margin: 0%;
padding: 0%;
}
body{
height: 100%;
position: static;
margin: 0%;
padding: 0%;
}
#whitetop {
width: 100%;
height: 4%;
position: absolute;
background-color: #E8E8E7;
top: 10%;
left: 0%;
right: 0%;
bottom: -10%;
padding: 0%;
z-index: 1;
}
#whitebot {
width: 100%;
height: 30%;
position: absolute;
background-color: #E8E8E7;
top: 32%;
left: 0%;
right: 0%;
bottom: -32%;
padding: 0%;
z-index: 1;
}
#earth {
width: 100%;
height: 20%;
position: absolute;
top: 10%;
left: 0%;
right: 0%;
bottom: -10%;
z-index: 0;
}
</style>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home</title>
</head>
<body>
<div id="whitetop">
</div>
<div id="whitebot">
</div>
<img src="earth2.jpg"/ id="earth">
</body>
</html>
If you're looking to make your website responsive, CSS media queries are the way to go.
The key concept behind resizing is this: screens wider than 960 pixels are typically viewed on PCs, while anything 960 pixels and below is usually seen on mobile devices or iPads...
@media screen and (max-width: 960px) {
At this breakpoint, switch everything to percentages for optimal display on mobiles and iPads
}
Situation : There is an existing Wordpress site with an old theme that does not allow changing the header image. To work around this limitation and display a different image on a specific page, I have hidden the header image using CSS and replaced it wit ...
For my latest project, I am building a straightforward ecommerce website. One of the key features on the product page is the ability for users to select different attributes such as sizes and colors. These options are represented by clickable divs that pul ...
When working with react-bootstrap, I encountered a challenge involving a button with a caret that opens a dropdown menu. https://i.sstatic.net/7cfN3.png However, my requirement is to replace the button and caret with vertical three dots styled differentl ...
I'm struggling with designing a ranking bar that consists of 9 bars. I want the height of the bars to vary, with bar 0 and bar 8 being the longest. However, I am having difficulty manipulating my jQuery selector to change the CSS style of the bars bas ...
I need help optimizing my HTML page that includes certain sections with large Javascript files and images, which are initially hidden. Even when set to "display: none," the browser still loads all the content. One solution could be moving those sections in ...
I am currently following along with this tutorial and I have reached the part where Vuetify is being added. Despite matching my code to the tutorial, Vuetify does not seem to load on my end. In the comparison image below, the left side shows how it appear ...
Greetings everyone! I have created two divs and want to display something only when the h3 is clicked, not hovered over. How can I achieve this? I tried changing hover to click but it didn't work as expected. Apologies for any confusion in my explanat ...
When retrieving JSON from an HTML form, a common issue is that all the values inside the JSON are converted to string types. I have tried both methods below, but the result remains the same: result = json.dumps(request.form) result = jsonify(request.form ...
When I call the Bootstrap 5 modal from a dropdown, it only shows a grey background instead of the content. What could I be missing? You can find the code in this JSFiddle link: <div class="container"> <div class="row"> ...
To display a bootstrap modal, we can utilize the data-toggle attribute. For instance: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#msg">Open Modal</button> I want to show the modal by using a boolean var ...
My current challenge involves trying to utilize JavaScript to access table cells by using the getElementsByTagName method. The end goal is to compare each cell in the array to a specific value and then change the background color of that cell based on the ...
Currently working with PHP version 5.6.12, I am retrieving query results from the database and executing the following code: $query = "SELECT `title`, `text`, `url`, `image`, `url_type` FROM `links`"; $result = $conn->query($query); if(!$result) die($c ...
I'm having trouble getting Icomoon fonts to display on my website. I downloaded the files and placed them in my /fonts directory, following the steps outlined here. I edited icomoon/style.css with the appropriate font-face code: @font-face { font ...
Hey there, I have a question about the vertical alignment of numbering in an ordered list. It seems that the numbers are being pushed to the baseline when <li> elements contain floated divs only. Is there any way to prevent this and have the numbers ...
As a newcomer to both Stackoverflow and Angular, I am currently working on developing a frontend app (an ecommerce platform) using Angular. I have implemented a click event on a button within a mat-menu in order to achieve the following functionality: when ...
I am currently in the process of creating a single-page website. I have incorporated react-bootstrap for the navigation bar, but I am facing an issue where it is not rendering on the page. Despite not encountering any errors, the page remains blank. Below ...
I recently completed a django app, but I'm facing an unusual issue with the bootstrap navbar not displaying menu items on mobile devices. When I access my app from a mobile browser, the hamburger menu fails to expand and show the navigation items. It ...
How can I extract the text 'True' from within the HTML tags <div>text</div> using Selenium and C#? <div type='data' id='OfferInCart' style='display:none;'>True</div> I have attempted to retr ...
The issue lies in the drop-down functionality (you can check out the problematic html code on this codepen, originally inspired by this source). <header class="pb-3"> <nav class="navbar navbar-expand-md navbar-light bg-white borde ...
My layout conundrum involves 3 buttons within a flexbox placed in a single table cell. I am trying to adjust the width of each button so that they collectively fill the horizontal space as much as possible. The issue arises when the buttons overlap and the ...