Unusual Space Between Division and Body

Looking for help with my HTML and CSS code

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    position: absolute; top: 50%; left: 50%; background: #121212; color: #fff;
    transform: translate(-50%, -50%); font-family: "Open Sans";
}

.container {
    max-width: 500px;
    font-style: italic;
    background: #353535;
    padding: 2em; line-height: 1.5em;
    border-left: 8px solid #00aeff;
}

.container span {
    display: block;
    color: #00aeff;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
}
<body>

<div class="container">
    Creativity is just connecting things. When you ask creative people how they did something,
    they feel a little guilty because they didn't really do it, they just saw something.
    It seemed obvious to them after a while. That's because they were able to connect experiences
    they've had and synthesize new things.
    <span>Steve Jobs</span>
</div>

</body>

Encountering issues with spacing on mobile devices

https://i.sstatic.net/PsMZB.png

How can I reduce the unused space on the sides to only 50px?

htmlcsspaddingquotes

Answer №1

Revamp Website Layout with Flexbox

 body {
        background: #121212;
        color: #fff;
        font-family: "Open Sans";
        display: flex;
        align-items: center;
        justify-content: center;
        min-height:100vh;
    }


@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: #121212;
    color: #fff;
    font-family: "Open Sans";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height:100vh;
}


.container {
    max-width: 500px;
    font-style: italic;
    background: #353535;
    padding: 2em; line-height: 1.5em;
    border-left: 8px solid #00aeff;
}

.container span {
    display: block;
    color: #00aeff;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
}
<body>

<div class="container">
    Creativity is just connecting things. When you ask creative people how they did something,
    they feel a little guilty because they didn't really do it, they just saw something.
    It seemed obvious to them after a while. That's because they were able to connect experiences
    they've had and synthesize new things.
    <span>Steve Jobs</span>
</div>

</body>

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

What is the best way to include the application version in an Electron project using JavaScript

While attempting to publish an update for my app, I encountered a strange error. Can anyone pinpoint the issue? (Note: Node.js is included) Error Message: Unexpected token < <script> console.log(process); let output = <h2 class="page- ...

javascripthtmlelectron

Achieve Perfect Alignment of Text Inside a Floating Div

Currently, I have a div aligned to the right inside another container. The text (date/time) within this right-aligned div needs to be vertically centered without using top padding. Whenever I apply top padding, it shifts my div downwards and disrupts its ...

htmlcss

increasing sticky header, refreshes the scroll location of the website

My website has a fixed header that expands to reveal more content when a button is clicked. However, I noticed that if the page has been scrolled down before clicking the button, the scroll position resets to the top of the page. To see this issue in acti ...

jquerycss

Showing hidden errors in specific browsers via JavaScript

I was struggling to make the code work on certain browsers. The code you see in the resource URL below has been a collection of work-around codes to get it functioning, especially for Android browsers and Windows 8. It might be a bit sketchy as a result. ...

javascriptandroidjqueryhtml

What is the best way to serialize form data while also including a child collection?

Currently, I have a webpage within my web application where I am in the process of creating a Person object using an AJAX POST request. The required JSON format that needs to be sent to the API endpoint is as follows: { "categoryId": "string", "na ...

jqueryhtmljsonajaxserialization

What is the most efficient way to toggle the enable and disable functionality of a submit input type after selecting a radio input type?

Can someone help me figure this out? I have a form with multiple groups of radio buttons, and I want to disable the submit button until at least one radio button from each group is selected. The code I've tried so far isn't working as expected. W ...

javascriptjqueryhtmlformsradio-button

Having trouble loading @font-face fonts

I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...

cssapachefontssassdirectory-structure

Elements separated by empty space on a Complex Grid, appearing distant despite the available space

Struggling with creating a complex layout using minimal relative and absolute positioning. Here's the issue I'm facing: All my elements are aligned side by side with only one problem: the border image needs to bleed into the row below. How can t ...

htmlcsslayoutsusy

The sticky navbar remains fixed only within the initial section of the page

Currently, I am working on a Bootstrap website that is supposed to be a one-page site with a navigation bar at the top. However, I am facing an issue where the navbar is sticky only for the first section and then disappears as I scroll down. How can I make ...

htmlcssbootstrap-4

Unable to retrieve the desired information

Being new to development, I recently attempted an AJAX search and encountered the following issues. Upon running it, I received an "undefined" error message. How can this be resolved? This is where you enter text. <input id="word" type="text" placehol ...

javascripthtmlajax

HTML/CSS - How to make an element wider than its containing element while staying visible

I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...

htmlcsslayout

Ways to move the scroll to the bottom of the div by clicking

Can anyone help with why my scroll code isn't working? I'm trying to make the scroll go to the bottom when I click on $('#openDiv'). For example, when you enter a chat room on stackoverflow, the scroll is automatically at the bottom, a ...

jquerycssscroll

Issue with the Bootstrap carousel jQuery plugin

Hi everyone, I need some help with creating a multiple items bootstrap carousel. I keep getting an error message that says "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function. Can anyone guide me on how to fix this issu ...

javascriptjquerycsstwitter-bootstrap

Step-by-step guide on embedding a function in HTML using vbscript

I'm working on a dynamic HTML list that I want to enable or disable based on user input. Typically, you can just use the "enabled" or "disabled" attribute at the end of the select element to control the entire list. However, I'm unsure how to ach ...

htmlvbscript

Error: unexpected syntax error at the end of the for loop in PHP MySQL

I encountered a puzzling issue with the "endif" statement after properly implementing code I found on YouTube with MySQL. <?php <?php for($x = 1; $x <= $pages; $x++); ?> <a href="?pages=<?php echo $x; ?>&per-page=< ...

phphtmlmysqlcsscontent-management-system

Design a grid-like layout using flexbox styling

I am looking to design a form using a table-like structure similar to what we typically do with HTML. The image below shows the basic layout I am aiming for: https://i.sstatic.net/H6b3f.png. Can anyone provide guidance on how to code this type of structu ...

htmlapache-flex

JavaScript for Color Swapping on Click Event

While working on coding a website, I attempted to change colors and pictures onclick using JavaScript to edit the CSS. However, the code is only partially functional. Only the "txtArea" field changes color. After checking validators and consoles, everyth ...

javascripthtmlcssvalidationdebugging

Undefined variable 'site' error encountered in Codeigniter views

Query: I encountered an issue while running the program: undefined variable "site" in the views. The code snippet is as follows: <ul class="nav nav-pills"> <li><a href="<?php echo $site ?>/CI_timeline/index"& ...

phphtmlcsscodeigniterundefined

What is the best way to showcase a value in JavaScript using CSS styling?

I'm looking to customize the background, font style, and outline for both open and closed elements in the code snippet below: a.innerHTML = "We are Open now now."; a.innerHTML = "We are Closed, arm."; Additionally, I want to appl ...

javascripthtmlcss

Managing a fixed footer in an Android webview to prevent it from obstructing an input field when the soft keyboard appears

I am working with a webview that contains a React app, not React Native. The webview features a login page with two input fields and a fixed footer. However, when one of the input fields is focused, the footer moves up and covers part of the input field, ...

androidhtmlcssreactjswebview