Css can be quite finicky when it comes to responsiveness

I'm currently working on a project and I've run into an issue where the CSS gets messed up when I resize the window. I'm struggling to make it responsive while still maintaining the desired look.

Even after switching to rem units, the problem persists.

Here is the CSS code snippet:


    color: whitesmoke;
}

p{
    text-align: center;
    font-size: 15px;
    font-family: 'Source Sans Pro', sans-serif;
}

#space_background{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    z-index: -1;
    min-height: 100%;
}
h1{
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 3vw;
    font-family: 'Source Sans Pro', sans-serif;
}    
... (CSS Code continuation) ...

And here's the HTML part:

<html>
  <head>
    <!–– Head Section Content ––>
  </head>
  <body>
    <!–– Body Section Content ––>
  </body>
</html>

Everything looks perfect in full resolution but falls apart when resizing the window.

css

Answer №1

You have the option to utilize both the width and max-width properties within a single CSS object:

#globe {
    width: 500px;
    height: 500px;
    max-width: 100%;
    z-index: 1;
    display: block;
    margin: 0 auto;
    vertical-align: middle;
}

In order to ensure your elements are responsive, it is recommended to incorporate media queries.

@media screen and (max-width: 500px) {
    #globe {width: 100%;}
}

@media screen and (min-width: 501px) and (max-width: 800px) {
    #globe {width: 75%;}
}

#globe {width: 50%;}

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

Resetting CSS animations using animation-delay

My aim is to animate a series of images on my landing page using Next.js and SCSS. The issue arises when I try to add dynamic animations that reset after each cycle. The delay in the animation causes the reset to also be delayed, which disrupts the flow. I ...

cssanimationnext.jssasscss-animations

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

htmlcsstwitter-bootstrapbootstrap-4

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

There are certain CSS3 properties that are not being accounted for in the CSS min

I've incorporated several newer CSS3 properties in my stylesheet, but I'm concerned that the minification tool I'm currently utilizing may not be capturing all of these properties: .big-blue-button:hover { text-decoration: none; bac ...

javascripthtmlcssminify

Adjust the size of H1, H2... tags based on their own specifications, rather than the surrounding element

I have run into a bit of a conundrum with my code and cannot seem to find the right solution. Here is what I currently have: <div id="bloquetexto4" class="bloquetexto"> <H2><b>TITULO</b></H2> <p>Texto bla bla bla.</p ...

htmlcss

Arranging several lists in columns with a customized header title

I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that ...

htmlcssvalidation

Creating a personalized design for Bootstrap Badge

Looking to customize the shape of bootstrap badges from the default ellipse to a rectangle with rounded corners. Any tips on the best approach to accomplish this? ...

csshtmltwitter-bootstrap

Aligning text vertically to the top with material UI and the TextField component

Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...

javascriptcssreactjsmaterial-ui

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

Content is not properly fitting in the Bootstrap modal window

I am experiencing difficulties with the appearance of a bootstrap modal on my website. Specifically, the modal div seems to be too tall and too narrow in comparison to the modal-dialog div. Here is where I am triggering the modal. <footer> < ...

csstwitter-bootstrapmodal-dialogpartials

Tips for organizing three flexbox divs in a horizontal row

Within the content div, I have three separate divs that resize when the browser window is adjusted. The blue and red divs should maintain a fixed width The green div should resize to fill any available space on the left I attempted to accomplish this usi ...

htmlcss

Maximizing Efficiency on the Frontend: Balancing Requests with Caching

I am currently tackling a large website that has accumulated quite a bit of technical debt that needs to be addressed. The site contains a significant amount of JavaScript and CSS files being loaded. Currently, these files are aggregated and minified in la ...

javascripthtmlcssperformancefrontend

CSS descendant selector add style excluding child elements

My issue involves two divs each containing a table. When I apply the CSS class "table" to the first div, the second table in the div is impacted as well. .tbl-generic th:nth-child(-n+2),td:nth-child(-n+2) { background-color:red; width:25px; } ...

htmlcss

Create a page that expands to full height with the ability to scroll

I am trying to achieve a layout using flex that fills the entire height of the screen. https://i.sstatic.net/s1RA5.png My goal is to have a red background that scrolls based on the content inside. If there is more content, I want it to maintain the same ...

cssflexbox

The arrangement of my inline-block divs is oddly meandering in a zig-zag pattern

I am attempting to visualize basic commands and their arguments in HTML. Here is the expected output: https://i.stack.imgur.com/MTxbV.png However, the actual output looks like this: https://i.stack.imgur.com/biPFw.png This is the code I utilized: ht ...

css

Having trouble getting your jQuery/JavaScript function to detect the property "-webkit-clip-path"?

Exploring the clip-path feature of CSS has been a fun experiment for me. I have successfully implemented it in my project and am now trying to incorporate JavaScript to dynamically change the start/stop positions of the clip-path. Below is a snippet of my ...

javascriptjqueryhtmlcss

Strategies for handling divisions while resizing the browser界面 manipulating divisions during

Here's the HTML/CSS code I'm working with: .container { max-width: 900px; margin: 0 auto; margin-top: 30px; } .divisions { border: 1px solid Black; } .Fisrt-Line { height: 180px; } .First { background-color: Green; width: 32.2% ...

htmlcss

The way jQuery and CSS are rendered in the same browser window can vary depending on whether they are loaded via Django or statically

Experiencing a perplexing dilemma. While viewing a web page created using html, jquery, and css on the same browser but in two separate tabs, I am encountering varying renderings of the page. Scenario 1: Directly loading the html file from the file system ...

javascriptjqueryhtmlcssdjango

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once

Take a look at my JavaScript code: $('#carousel-container').bind("slide.bs.carousel", function () { //reset the slideImg $('.slideImg',this).css('min-height', ''); //set the height of the slider var ...

javascriptjqueryhtmlcsstwitter-bootstrap

Customizing the cursor for disabled custom controls in Bootstrap 4

I'm having trouble changing the cursor for disabled custom-control elements like checkboxes and radiobuttons. The following style isn't working as expected: .custom-control-input:disabled ~ .custom-control-label::before { cursor: not-allowe ...

cssbootstrap-4twitter-bootstrap-4