problems with basic text styling in containers

I've been experimenting with text in boxes and I've noticed that when the screen size changes, extra padding is added to the top of the box even though it's not in the code. Is there a way to prevent this from happening when the screen resizes?

* {
    box-sizing: border-box;
}

/* Create three columns of equal width */
.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

/* Style the list */
.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

/* List items */
.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

/* Grey list item */
.price .grey {
    background-color: #eee;
    font-size: 20px;
}

/* The "Sign Up" button */
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}
Try it Yourself »
<div class="columns">
  <ul class="price">
    <li class="header">Basic</li>
    <li class="grey">$ 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>
<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:20px 20px;text-align: justify;">
    <H2 ALIGN="CENTER">PLAN IT</H2><BR>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu </p>
      
  </div>
</div>

Answer №1

I'm a bit confused by what you're asking. It could be because I'm using Chrome, which might display things differently than your browser. So my answer is based on the idea of what I imagine it to be. Apologies for any confusion.

You can check if the styling you're seeing is default by using F12 in your browser.

To address the issue, you can try implementing Reset CSS or normalize.css before any other CSS files. Alternatively, you could add div {padding:0;margin:0;} at the beginning of your CSS file.

Answer №2

To implement this, you can utilize an External CSS File

  1. Begin by creating a file named yourname.css
<head>
    <link rel="stylesheet" href="path/to/external/stylesheet.css" />
</head>
  1. Insert
    <div id="yourpad" </div>
    into your code
  2. Next, simply update yourame.css with the following code

.yourpad{ padding 0px 0px 0px}

Answer №3

Is this the desired outcome? There doesn't seem to be any padding added to your title after resizing.

Instead of using inline styles, consider creating a class and applying your styles there.

Keep in mind that padding: 20px 20px;(20px top/bottom, 20px left/right) is equivalent to padding: 20px; (20px for all sides).

To center elements, it's recommended to create a class as align="center" is deprecated in HTML5:

Reference:

.centered {
  text-align: center;
}

html,
body {
  margin: 0;
}

.mystyle {
  color: #ddd;
  background-color: #282E34;
  text-align: center;
  padding: 20px;
  text-align: justify;
}

.centered {
  text-align: center;
}
<div style="position:relative;">
  <div class="mystyle">
    <H2 class="centered">PLAN IT</H2>
    <BR>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsu </p>

  </div>
</div>

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

Utilizing distinct useState for mapped elements

I am struggling to find a solution on how to pass specific useState states to respective mapped elements. export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const [mountainVisible, setMountainVisible] = useState(fa ...

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...

Is there a way to verify the presence of data returned by an API?

I am trying to implement a system in my Index.vue where I need to check if my API request returns any data from the fetchData function. Once the data is fetched, I want to return either a boolean value or something else to my Index.vue. Additionally, I wou ...

When using CSS border-width:1px, I notice that the borders aren't consistently thin

I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...

Encountering difficulties with the mobile display of a Wordpress theme

I am currently working with the megashop theme on WordPress and I have a few queries that need addressing: Is there a way to modify a specific setting exclusively for views smaller than desktop size, without impacting the desktop view? For example, the m ...

Navigate to a local server running on localhost:3000 and access the external URL www.google.com

When attempting to access an external URL, the website that should open in a new tab is redirecting to http://localhost:3001/www.google.com instead of www.google.com. <IconButton key={index} size="large" color="primary" href={e.url ...

How to achieve a gradual border or box-shadow transition from thick to slim using CSS

Is there a way to achieve the design shown in the image below? I am looking for a thick top border that gradually becomes thinner as it reaches the sides and seamlessly merges into the black block. https://i.stack.imgur.com/gmjQh.png Here is my CSS code ...

Guide to dynamically refreshing a section of the webpage while fetching data from the database

I'm currently developing a website using PHP & MySQL where some queries return multiple records. Each record has its own dedicated page, allowing users to navigate between them using arrows. So far, everything is working smoothly. However, I've ...

Material UI does not support the inline attribute for applying CSS properties

Trying to adjust the CSS for Material-UI When setting the width, everything works fine. However, when attempting to set display inline, an error occurs ---> "inline is not defined" Can anyone provide guidance on how to resolve this issue? Sharing my cod ...

What happens to the content in a browser when the window is minimized?

The appearance of my application is enhanced when the browser window is maximized to its full extent, causing the content to be collapsed upon minimizing the browser window. I prefer the content not to collapse. I have utilized a div that resembles a text ...

Scrollbar issue and splitting line in half

I am writing some CSS code below. I am trying to achieve horizontal scrolling, but if the sentence is too long, it breaks and displays on the next line. In the image, I want "aaaa.." to be displayed on only one line and "bbb.." on the second line, ...

Eliminate perfect-scrollbar functionality on mobile devices

I have applied the perfect-scrollbar class with 'height: auto' on mobile screens, expecting it to work properly. It's functioning well in responsive mode on the web. However, it does not scroll on mobile devices. @media (max-width: 992px) { ...

The image is not resizing correctly

Currently, the background-image on my website displays properly when the browser occupies the entire screen. However, when I resize the browser window, the image shrinks to a certain point and then suddenly stops adjusting. Here is a visual representation ...

Utilize jQuery to swiftly align elements within a designated container

Check out my JSFiddle example: http://jsfiddle.net/c62rsff3/ I'm attempting to implement snapping behavior between 2 elements using this code: $('.draggable-elements').draggable({ snap: true }); In addition, I've defined a container ...

Responsiveness of a div containing various content

I am currently working with Bootstrap 4 and my HTML code looks like this: <div class="font-weight-bold col-12"> <span>Filter :</span> <input type="text" class="form-control" /> </div> Initial ...

Do CSS Stylesheets load asynchronously?

Is there a difference in how stylesheets are loaded via the link tag - asynchronously or synchronously? In my design, I have two stylesheets: mura.css and typography.css. They are loaded within the head section of the page, with typography.css being load ...

What causes an iframe to scroll horizontally when scaled?

I'm in the process of resizing an iframe element on my webpage using a CSS media query to adjust its dimensions. However, when I scale it down and interact with the iframe, my webpage starts scrolling horizontally. The issue is evident when using Chro ...

Tips for positioning an MUI element inside a container to extend to the edge of the browser window

Currently, I'm working on a project with a Material-UI (MUI) container that contains a Stack element. Within this Stack, there are two Box elements displayed in a row, each set to take up 50% of the width. In my design, I want the second box to break ...

Tips for creating an adjustable background image size

Is it possible to adjust the height of a section to match the background using CSS? Currently, the height is determined by the content within the section. CSS: .content-block { background-size: cover; background-position: center center; } HTML: &l ...

Is there a way to properly align unordered lists (such as a navigation menu) within a div with a width set at

UPDATE: I found a creative solution to my issue. By adding margin-left and margin-right set to auto, along with fixing the width of the nav menu to 1002px and setting its positioning to relative, I was able to achieve the desired effect. Additionally, I cr ...