Delete margin white space on small devices (mobile phones)

user_13563009 0
Viewed 1087

I do not want any white space at the margins at small devices. When the screen is already small it is counterproductive to use anything but the full width of the screen.

So I am using a theme through wordpress, but I figured out the container div and was able to modify it, I wanted to make it narrower. I also declared a div (child1wide) that would be wider than the container (that has the width of 65%), hoping the marings would dissapear.

The problem is that there are margins, that is white space, on the sides of the text on small screens. How can I get rid of this white space? I still want to have marrgins on bigger screens.

You can see how it looks today: https://imgur.com/dcVIGBJ

The un-modified .container has acceptable margins, but I want to make it work for .child1wide and maybe learn something new.

CSS (observe, the .container is probably also defined within my wordpress theme, this is only me additional "Custom CSS"):

.child1wide {
  background-color: yellow;
  display: flex;
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.container {
width: 65%  ;
padding: 0px 0px 0px 0px;
}

HTML (the second "Lorem ipsum"-text is outside the .child1wide-div, meaning it is automaticly in the .container-div set by wordpress theme):

<div class="child1wide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea.

I know about the @media only screen and but can not make it work.

css html
4 Answers

When you're not that good at math (like me), it might be a lot to take in at first glance. But I assure you, once you start using the equations you will learn to appreciate their power and ease of use.

Preliminary version: this anwser may need some updating depending on your comment.

To start off, the snippet with the final code first, explanation later (as in tl;dr). Best save it in a new HTML document first, open that document in the browser and start resizing...

/********************************/
/* a few preferred global rules */
/********************************/
html,body {
    box-sizing: border-box;     /* use client+padding+border in calculations */
    height: 100%; width: 100%;  /* to fill full viewport */
    margin: 0;                  /* getting rid of HTML spacing */
}
body { min-height: 100vh }      /* to fill full viewport */

*::before,*::after,
 * { box-sizing: inherit }      /* take over parent setting */

/*
    Responsive page padding using
    Linear Equation y=mx+b for points p1(x1,y1) p2(x2,y2)

    Reference
    MathIsFun: Equation of a Straight Line
    https://www.mathsisfun.com/equation_of_line.html

    y = resulting size we need

    m = (y2 - y1) / (x2 - x1),
        fixed result 1

    x = always one of 100vh/vw/vmin/vmax (VX in below CSS calc)
        variable part of our equation, which makes our y change on browser resize

    b = y1 - m * x1 and with m substituted: b = y1 - (y2 - y1) / (x2 - x1) * x1
        fixed result 2

    x1 - minimum viewport size
    y1 - needed size at minimum viewport     

    x2 - maximum viewport size 
    y2 - needed size at maximum viewport
    
    x1,y1,x2,y2 in pixel unit (can be any unit, provided you use the proper unit conversion)

    CSS calc: calc(m * 100VX + b) 
    Final   : calc(mVX + b) => multiply m with 100 to get rid of '* 100VX' 

    top/bottom padding: p1(320,32) p2(1920, 72) => y = 0.025x + 24   (vp height dependent)
    left/right padding: p3(320, 8) p4(1920,320) => y = 0.195x - 54.4 (vp width dependent)

    top/bottom padding:
        m = (72 - 32) / (1920 - 320) = 40 / 1600 = 0.025
        x = vp height dependent, so 100vh
        b = 32 - 0.025 * 320 = 32 - 8 = 24
        CSS calc = calc(0.025 * 100vh + 24px) => calc(2.5vh + 24px) 

    left/right padding:
        m = (320 - 8) / (1920 - 320) = 312 / 1600 = 0.195
        x = vp width dependent, so 100vw
        b = 8 - 0.195 * 320 = 8 - 62.4 = -54.4
        CSS calc = calc(0.195 * 100vw - 54.4px) => calc(19.5vw - 54.4px) 

*/
.padded { padding: calc(2.5vh + 24px)     calc(19.5vw - 54.4px) }
.halfTB { padding: calc((2.5vh + 24px)/2) calc(19.5vw - 54.4px) }
/* half height T/B padding, simply divide result of calc for T/B  by 2 */

/* uncomment to constraint padding below 320, above 1920 *//*
@media screen and (max-width: 320px) { .padded { padding: 32px   8px } }
@media screen and (min-width:1920px) { .padded { padding: 72px 320px } }
/* probably not really needed, just to be complete */

/* Extra: responsive base font size: y = 0.00625x + 12 */
/*        points p1(320,14) p2(1280,20) vp independent where 0.75rem = 12/16 */
body        { font-size: calc(0.625vmin + 0.75rem); line-height: 1.3333 } /* use root fontsize */
:root,html  { font-size: 100% }   /* use browser default fontsize (from browser user settings) */

.child1wide { width: 100% } /* width is restricted by L/R .padded, centered automatically */
.container  { width:  66.667%; margin: 0 auto } /* width restricted by percent%, centered by margin */
<h1 class="padded halfTB">calculated padding versus percentage<br>resize the browser to see the effect</h1>
<h3 class="padded halfTB">normally you would use ".padded" on some main container, now split to show difference</h3>

<div class="child1wide padded">
    <h2>padding with Linear Equation</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu.</p>
</div>
<div class="container">
    <h2>width 66.667%, margin: 0 auto</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu.</p>
</div>

As you stated that you wanted responsive, (little to) none spacing on smaller devices and 'normal' spacing on larger devices, using @media queries (MQs) would be the obvious choice. They're commonly used all over the world by many developers, as I did too.

However, over the past few years I have learned to use a single equation (Codepen: responsive typography) to determine a needed size at a specific browser viewport size, instead of using a list of MQs testing for a specific vp size and set a size at specific breakpoints.

E.g.:

.some-class: { font-size: calc(0.625vmin + 12px) }

can do exactly the same as

.some-class { font-size: 13px } @media (min-size: 320px) { .some-class { font-size: 14px } } @media (min-size: 480px) { .some-class { font-size: 15px } } @media (min-size: 640px) { .some-class { font-size: 16px } } @media (min-size: 800px) { .some-class { font-size: 17px } } @media (min-size: 960px) { .some-class { font-size: 18px } } @media (min-size: 1120px) { .some-class { font-size: 19px } } @media (min-size: 1280px) { .some-class { font-size: 20px } }

or whatever font-size on a breakpoint you require at any given moment.

As you can see, one calculation instead of eight CSS rules. To accomplish this we need to use a

'Linear Equation: y = mx + b' (MathIsFun: Equation of a Straight Line, easy to understand Middle School explanations, well worth the read).

where:

  • y = mx + b, the responsive result we need
  • m = (y2 - y1) / (x2 - x1), steepness of the line, fixed value
  • x = always 100vmin/vh/vw/vmax, variable value
  • b = y1 - m * x1, value of y when viewport size is 0 (x=0), fixed value
  • x-axis browser viewport size
  • y-axis (responsive) size

for

  • point 1 (x1,y1), low point on a line, min. browser viewport size, min. required size
  • point 2 (x2,y2), high point on a line, max. browser viewport size, max. required size

What we're essentially doing is:

  • select a low and a high point on a XY-graph, being the minimum and maximum responsive size we need
  • draw an imaginary line between the two points
  • and have CSS calc() calculate all the other points on that same line being the responsive size (font, margin, padding, width, height, etc.) we need at any given time.

Pro: much less CSS, less maintenance

Con: Takes some more preparation when coding and only works for straight lines (no rocket science included). Exceptions to the calc() result will still need some MQ.

The code snippet is heavily commented with step by step equations using a few examples:

  • responsive base font size, body { font-size: calc() }
  • responsive page padding, .padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) }
  • resonsive half top/bottom padding, simply dividing .padded calc(2.5vh + 24px) by 2
user_20159090

I do not understand the calc function. So the

.padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) } will produce top and bottom paddings, or left and right?

If the viewport height is 1000px, calc(2.5vh + 24px) will give a padding of

390.4px through 390px * 2.5vh + 24px = 1000px??

user_135630090

I solved my problem for now by setting my main theme container as:

@media screen and (max-width: 600px) {
  div.container {
    width:95%;
  }
}
user_135630090

The reason of the overflow:

  • The element “child1wide” has width =75vw - change width to auto
  • “child1wide” has negative left margins - probably better to use position: relative and move content with positioning (top, left, right, bottom)
user_107225450
Related