I am in need of help with coding so that my entire webpage is displayed properly even when I resize it to the smallest width. Additionally, I need assistance with making

Having some issues with making my personal website work correctly. I'm planning to share images of how it looks at different widths - largest width and smallest width. Also, here are the links to my website here and to my GitHub code here

Seeking guidance or help regarding making my website responsive to resizing. Here is the CSS code for the "< body >" and the "< div >" that I want to be responsive (@media only screen and (max-width:1000px){})

body{
    font-family: 'Press Start 2P', cursive;
            margin: 0;
}

.main-area{
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}
cssresponsive-designresponsiveweb-frontendresponsiveness

Answer №1

You're on the right track, just a few more breakpoints are needed to enhance responsiveness.

/* For phones with max-width 600px */
@media only screen and (max-width: 600px) {...}

/* For large phones with max-width 768px */
@media only screen and (max-width: 768px) {...}

/* For tablets with max-width 992px */
@media only screen and (max-width: 992px) {...}

/* For laptops and desktops with min-width 1200px */
@media only screen and (min-width: 1200px) {...}

If possible, include at least one breakpoint for mobile devices (max-width: 768px) and another for tablets.

min-width signifies designing from mobile upwards, while max-width indicates starting from desktop size and adjusting for smaller screens.

Within these breakpoints, customize styles for different elements like so:

For the main-area, you could set it up as follows:

@media only screen and (max-width: 768px) {
    .main{
        height: auto;
    }
    .main-area{
        display: block;
    }
}

This will optimize the main area's appearance on mobile devices. Likewise, modify properties for other elements as needed, such as making icons larger and adjusting padding for improved aesthetics.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

css

What is the best way to showcase a blank div element using CSS?

Is there a way to make this empty div tag display without having to add &nbsp;? Can it be achieved using only CSS? <div class="bar bg-success" title="2015-07-23,5.0000" height="50%"></div> .bar { background: green; width: 5px; float ...

htmlcss

Permitting various valid responses for questions in a multiple-choice test | Utilizing Angular.js and JSON

As a beginner in this realm, I must apologize if my query seems naive. I recently crafted a multiple-choice quiz using HTML, CSS, JavaScript (angular.js), and a JSON data file following a tutorial I stumbled upon. The outcome pleased me, but now I am face ...

javascripthtmlcssangularjsjson

I'm having trouble getting my jQuery click handler to work

Here is the HTML content within my Sharepoint 2010 Web Part project: <html> <h1>Travel Form Assistance</h1> <div id="preTravel" name="preTravel"> <h2>Pre Travel</h2> <img id="imgPreTravel" name="imgPreTra ...

jqueryhtmlcsssharepoint-2010

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

I included this code in the basic module HTML block of a WordPress page builder and encountered the white screen of death. According to the Chrome developer console, the following error occurred: helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is ...

javascriptjqueryhtmlcsswordpress

Ensure the video fills the entire width of its parent element and adjusts its height accordingly to maintain a 16:9

I am looking to make both videos fill 100% width of their parent element while keeping their aspect ratio intact. The parent element takes up 50% of the window's width, so the videos need to be responsive. I have come across numerous solutions that ...

javascripthtmlcssvideoyoutube

Ways to adjust the distance between logo and slider

I am using this script to showcase some products. You can find the script at: http://tympanus.net/Tutorials/ItemSlider/ When resizing the web browser from maximum size to smaller, I find that the height between the logo and shoes is too large for my likin ...

jqueryhtmlcssslider

Ways to Create a Webpage with a Single Color Palette

Struggling to update the background color on my webpage and hitting a wall. Even with content, the black background only extends as far as the content does. I've experimented with extending the content, using the body selector, and universal selector ...

htmlcss

Step-by-step guide on implementing a border-bottom for an active link

Is there a way to apply a border-bottom to btn_articles and btn_posts when one of them is clicked? I attempted to use the active class but it did not have the desired effect. Any suggestions or solutions would be greatly appreciated. let btn_articles = ...

javascriptcss

How can a new <li> element be created without being influenced by certain CSS styles?

I am attempting to enhance my menubar by adding a signup/login item aligned on the right without affecting the other center-aligned items. Essentially, I have an entry named "Login/Sign Up" that should maintain its own unique style while seamlessly blendin ...

javascripthtmlcss

A simple guide to viewing a sequential list of loaded stylesheets in Google Chrome

I've been trying to figure out the loading order of CSS stylesheets in Google Chrome, but I'm finding it a bit confusing. Despite my attempts to use Dev Tools -> Network tab -> filter for Stylesheets, I keep getting different results each t ...

htmlcssgoogle-chrome

Troubleshooting: Jquery Toggle Issue When Used with Adjacent Div Element

I've been puzzling over this issue for hours now. The intention of this code is to display a div, but it's just not cooperating. <div id="butbr"> <div id="sup_nav"> <div id="stup" class="bxt1"></div> <div id= ...

javascriptjqueryhtmlcssshow-hide

Converting a table into div elements and subsequently reverting it back to its original table format

[STOP DOWNVOTING: NEW AND IMPROVED] Discovering a simple technique on stackoverflow to transform tables into divs has been quite enlightening. By assigning classes to each tag, such as: <table class="table"> the process of converting from table to ...

javascripthtmlcss

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

I have designed tabs using the <button> element and enclosed the tab content within separate <div></div> tags like shown below: function displayTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsB ...

javascripthtmlcss

The function insertAdjacentHTML does not seem to be functioning properly when used with a

I am working with a parent element that contains some child elements. I create a DocumentFragment and clone certain nodes, adding them to the fragment. Then, I attempt to insert the fragment into the DOM using the insertAdjacentHTML method. Here is an ex ...

javascripthtmlcss

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...

csshtmlvideoembedcss-position

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript? https://i.sstatic.net/Z5uSq.png C ...

javascriptjqueryhtmlcssasp.net-mvc

Using JavaScript Functions to Resize Buttons and Change function on Click

I have a button in my code that triggers CSS changes by adding and removing classes. The JavaScript for this function works as intended - clicking once adds the class, clicking again removes it, and so on. However, I also implemented a feature to remove t ...

javascripthtmljquerycss

Creating an image slideshow with a looping JavaScript array: Step-by-step guide

One issue with the program is that when it runs, only the last array value image is displaying on the screen while the other images are not. Below is the HTML code: <img id="mg" alt="image not found"> And here is the JavaScript code: var images=[ ...

javascripthtmlcss

What is the best way to add borders to the cities on interactive SVG maps?

I'm currently developing Interactive SVG Maps showcasing Turkey. The map consists of 81 cities, each represented by <g> elements, and their respective districts, created as child elements within the city elements. It's worth noting that the ...

javascriptjqueryhtmlcsssvg