Is there a method for adjusting the size of content within a flexible div container?

I've been on a quest to find the solution to this dilemma, but no matter how hard I search, I can't seem to crack it!

Here's the issue: I want to keep this small paragraph centered neatly:

a glimpse of a webpage, showcasing navigation and some text.

This is my current approach:

.intro {
    text-align: center;
    max-width: 25%;
}
<div class="container-fluid intro">
  <hr style="height: 5px; width:40%;">
  <h2>Hi, I'm Heather!</h2>
  <h4>I'm a graphic design student out of New Hampshire with a love for all things fun, colorful, and creative!</h4>
  <p style="text-align: center;"><a href="resume.pdf">Resume</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac2cfcbdec2cfd8eac2c6c9d9dedfcec3c5d984c9c5c7">[email protected]</a>">Email</a></p>
  <hr style="height: 5px; width:40%">
</div>

The trouble arises when the browser window shrinks, as the paragraph still occupies 25% of the screen real estate, leading to this problem:

a downsized version of the previous image.

I've witnessed responsive designs that maintain centered text without consuming the entire div, but somehow I can't replicate it myself.

I appreciate any assistance in deciphering this puzzle. I hope that explanation makes sense! :)

htmlcss

Answer №1

When you set the max-width, it limits how wide something can get and prevents it from exceeding that width. This means that as you resize your screen, the item will shrink to stay within the specified maximum width.

If you want to make a menu responsive, consider using min-width instead:

.responsive-menu @media only screen and (max-width: 600px) {
  body {
    text-align: center;
    min-width: 25%;
  }
}
.responsive-menu {
    text-align: center;
    min-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

Create a replica of a Facebook share pop-up widget

I attempted to replicate the share button found at the bottom of this unsettling website: WARNING! THE CONTENT ON THIS SITE MAY BE DISTURBING!!! When I click on it, the link leads me here: If I copy the code: <a href="https://www.facebook.com/dialog ...

htmlfacebook

Modify the background color of a particular TD element when clicking a button using JavaScript and AJAX

When I click on the "Active account" button inside the designated td with the <tr id="tr_color" >, I want the value "1" to be added to the 'active_account' column in the database. I have been successful with this functionality. However, I a ...

javascriptjqueryhtmlcssajax

Using Clip Path will result in the content always being hidden if it

Here is an example I created: div { -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); background-color: red; width: 150px; height: 150px; position: relative; } ul{ position: absolute; ...

cssclip-path

Determining the condition of the menu: understanding whether it is open or closed

I'm diving into the world of jQuery and JavaScript, trying to grasp the ins and outs of the mmenu API. Despite my efforts to understand the libraries, the JavaScript code remains a mystery to me. Following the tutorial provided on , I successfully cr ...

javascriptjqueryhtmlcssmmenu

Align a card in the center of a carousel using Bootstrap

I'm looking to include a card within a carousel, but I'm struggling with getting the card element centered inside the carousel. Here's my current code: <div class="container"> <div class="row"> < ...

htmlcssbootstrap-4

Synchronization Problem between Background-Color Transition and Before/After Opacity Transition

I'm currently experiencing difficulties trying to fade in a navigation item using before and after pseudo-elements. When I hover over the nav item, it should transition its background-color from white to blue. It's a simple effect, but it also n ...

csscss-transitionsbackground-imagebackground-colorpseudo-element

Clicking on the loop sound function will play the selected sound

I am in the process of creating an online drum pad website, and I am encountering a few issues. One of them is that I want the kick to repeat when the user clicks multiple times in quick succession, creating a faster repetition similar to a real drum pad! ...

javascriptjqueryhtmlaudio

What are the best ways to incorporate mistakes into my JavaScript mortgage calculator?

I am struggling to set up my calculator so that it triggers an error message if the APR goes over 25% or falls below 0. Also, the Loan Term should be greater than 0 and less than or equal to 40, otherwise display an error message. I have attempted differen ...

javascripthtmlcsserror-handlingevent-handling

Capture the contents of a table cell and store it in the clipboard

Is there a way to create a hover copy button in a table cell without actually placing the button inside the <td> tags? The goal is to allow users to easily copy text from a specific column cell by hovering over it. function myFunction() { var c ...

javascripthtmljquerycsstwitter-bootstrap

Is there a possible CSS-only alternative to the calc() function that can be used as a fallback

I'm aware of a CSS backup plan for calc() in IE6-7. Also, I've come across an alternative using jQuery. But what about a CSS-only substitute for calc() specifically for IE8? Is there one available? ...

css

Implement the use of HTML buttons to dynamically change the source attribute of an image using

I am in the process of creating a webpage with 25 different images that will be displayed one at a time. Each image represents unique combinations from two sets of items: (ant, blueberry, ladybug, marshmallow, mushroom) and (blimp, truck, moon, ocean, redw ...

javascripthtml

Singularize button/solo in the center

How can I make this button align perfectly center on both PC and Mobile as a container? I have attempted the following CSS and HTML code: <section id="jour"> <div class="container"> <button class="btn1">Jeudi 12</button> ...

htmlcss

Angular allows for the creation of a unique webpage layout featuring 6 divs

I am working on a project where I have an image of a car and I need to overlay 6 divs onto the image which can be selected with a mouse click. When a user clicks on one of the divs, it should change color. I've attempted using z-index, but it doesn&ap ...

htmlangular

Troubleshooting JavaFX WebView parsing error when adding a stylesheet with calc function

Trying to embed a CSS file from a URL into a WebView with the following code: this.webView.getStylesheets().add("http://page.com/style.css"); Unfortunately, JavaFX is generating errors: CSS Error parsing http://page.com/style.css: Unexpected tok ...

javahtmlcsswebviewjavafx

Is it possible for media queries to effectively support mobile devices?

I have a specific requirement for my <input type="number"> element where I need the up and down spinner buttons to be displayed for selecting the next value. However, on mobile devices, these spinner buttons are not visible. To address this ...

htmlcssmedia-queries

"Enhance Your Form with Ajax Submission using NicEdit

Currently, I am utilizing nicEditor for a project and aiming to submit the content using jQuery from the plugin. Below is the code snippet: <script type="text/javascript"> bkLib.onDomLoaded(function() { new nicEditor().panelInstance('txt1' ...

javascriptjqueryhtmlajaxnicedit

When the page height is altered in real-time, it prompts a scroll event

When a slider on the page automatically switches slides and changes its height, it causes a scroll event to trigger unexpectedly. I want to modify the scroll event so that it only activates when the user physically interacts with the page by scrolling, r ...

javascriptjquerycss

Scrolling Effect with Fixed Background Image in FullPage JS

I am trying to use FullPage JS to create a fixed video background with scrolling content. The issue I am facing is that when I set the video to section 1, it shifts to a white background when scrolling. Any assistance would be highly appreciated! #fullp ...

javascriptjqueryhtmlcssfullpage.js

Steps for making a dropdown input field:1. Start by defining a

Is there a way to design a dropdown input using CSS or any other method? Take a look at this image for reference: Any suggestions on how to achieve it? ...

javascriptjquerycssdrop-down-menu

Difficulty with rendering content from Angular routes

Currently, I am working on a movie application where users can click on a details button to view information about a specific movie. However, I am facing an issue in displaying the information for the selected movie without showing all the movies at once. ...

javascripthtmlangulartypescript