In my current web standards design course, I am delving into HTML/CSS and focusing on making our websites more responsive this month. As part of the process, I have successfully converted all pixel units to percentages and changed all font sizes from pixels to ems. However, I seem to have made a mistake with the max-width property in my gallery section.
Instead of going through all the code changes, I will share the link to my website:
To improve your website layout, consider removing the width and margin from your body tag. Instead, create a CSS class called "wrapper" and use it within your containers like this:
.wrapper{
max-width:960px;
margin:0 auto;
width:100%;
}
<header>
<div class="wrapper">
// add your content here
</div>
</header>
<div id="content">
<div class="wrapper">
// add your content here
</div>
</div>
<footer>
<div class="wrapper">
// add your content here
</div>
</footer>
Alternatively, you can set the maximum width of your body to 960px and ensure it takes up 100% of the viewport:
body{
max-width:960px;
width:100%;
}
It is recommended to follow the structure with a wrapper for cleaner code maintenance in the long run :-)
Your CSS seems a bit buggy, but don't worry! I'll share with you a simple trick to make images responsive.
Just insert this code into your HTML file:
<img class="make-responsive" src="http://example.com/image.jpg">
And add the following CSS styles:
.make-responsive {
max-width: 100%;
height: auto;
width: auto;
}
With this code, your images will automatically adjust to different screen sizes and devices.
If you have any questions, feel free to ask! 🙂
If you're looking to make some adjustments, here's a snippet to help guide you in the right direction. Just follow these steps to tweak it according to your needs!
#gallery li{
width: 49%;
display: inline-block;
.display: inline; /* for IE 8 */
zoom: 1; /* for IE 8 */
/* float: left; MODIFY */
}
#gallery img {
width: 100%;
/* max-width: 100%; MODIFY */
}
#gallery_container{
width: 100%;
/* width: 41.666667%; MODIFY */
}
Take it for a spin and see how it improves your layout. Hopefully, this will help you achieve your desired design.
I have a code snippet that I need help with. I want to check for duplicates and if found, display an alert stating that it already exists so users can't insert the same word/tag again. Can someone please assist me? <div id="tags"> <span>a ...
Is there a way to update my website content similar to Google Drive's functionality? For instance, when using Google Drive, the URL changes from drive/my-drive to drive/recent when navigating to the recent section. I attempted to achieve this by usin ...
My web page includes several screenshots to illustrate the issue I am facing. One of my challenges is the scroll bar below the table, which I find displeasing. In an attempt to resolve this, I decided to adjust the lateral margins slightly. Here's a s ...
I've been attempting to center an image on my webpage above the footer, but all my efforts have failed. Here is the HTML code I've been using: <div class="center-block"> <img alt="footer" title="footer" class="image-footer" src="./i ...
I have implemented a jQuery function to organize a list of country names based on the user's selected language code (via a language select dropdown). You can find more information on this topic in this related post. The translation of country names s ...
On my page, I have multiple charts and I'm facing an issue where the chart UI does not update immediately when I try to make a delete call by clicking the delete button. I always have to refresh the browser to see the changes. I have provided the ful ...
Can someone help me with my HTML table setup? I have a table structure as shown below, and I am looking to add a "Total" row at the footer for each specific "quarter". "quarter1" "quarter2" "quarter3" "quarter4" 250000 115000 ...
How can I arrange these textboxes so that .textbox appears at the top, followed by textbox1 below? CSS .textbox { border: 1px solid #848484; -moz-border-radius-topleft: 30px; -webkit-border-top-left-radius: 30px; border-top-left-radius: ...
Can anyone help me achieve the following setup? I have a scenario where I need one div to be positioned absolutely, and another div as a simple block element overlapping the absolute container. This image illustrates what I'm trying to accomplish: T ...
Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...
How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...
I was trying to incorporate font-awesome into my Laravel project, but encountered a strange error. When I run the project, the following error appears in the console: GET http://localhost/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?5 ...
I am trying to create a div in the footer that sits side by side, but the current code is causing it to have an unwanted white border. <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #botto ...
Whenever I adjust the screen size, the text in front of the slider moves. I utilized the grid system in Bootstrap 5.2 to position it. My goal is to keep the text in its original position relative to the carousel when changing the screen size. Here is my co ...
I've searched through various forums but still can't grasp how to pass a JavaScript variable to Flask using post/get forms. I know that the form creates a post/get request that can be received by the Python Flask script, but I need a simple examp ...
Here are some options to consider: <pre> ... </pre> or you could also use style="white-space:pre" Are there any other possibilities we should explore? ...
I own a .cur file and I desire to utilize that specific cursor image whenever my mouse hovers over the canvas element in Google Chrome. <body> <canvas id="canvas" width="600" height="405" style="position:relative; background: black;" onc ...
Just started learning Angular, so I'm hoping this question is simple :) Without getting too specific with code, I could use some guidance to point me in the right direction. I'm currently developing a small shopping list application. The idea i ...
How do I determine which radio button is selected after clicking a specific div? For instance: <div class="largelines"> <p class="line">OPTION 1</p> <div class="delete"> <a href="#" title="Delete"></a> ...
Can you explain the distinction between running a JavaScript function during jQuery's $(document).ready() and embedding it in the HTML within script tags at the bottom of the body? Appreciate your insights, DLiKS ...