Couple of questions about css and code pen

Hi there,

I don’t know why but sometimes without making any change, An image the supposed to be width: 100%
just set on the left and till the middle and I can get 2 pens with same code but different margins ? (TEST version)


(Now I just move along with the “test” version)

And if I’m already here…

  1. How can I cancel the margin in the test version ? I tried margin-top: 0; | and top: 0; but nothing…
  2. Is it right to mix display: block with display flex or grid (In differnt divs) ? And if so, when it’s ok to mix?
  3. Some how, Nothing I do dosen’t make my .headline-flex to get a background-color… Just dosen’t work ?


Don’t know if it’s helping to understand but it’s like when I starting to change my ‘logo-text’ or 'logo,
Even if I just press enter end started a new permit, the background-color in ‘headline-flex’ kicks in :no_mouth:

If any one can help it will be a tremendous jump for me :slight_smile:

I think one of the biggest problems you’ve been experiencing (and I’ve seen this over multiple posts of yours) is that you’re combining a lot of different frameworks and it’s getting really jumbled together and therefore not working as it should.

My recommendation there is stick to just one. If want to used bootstrap, just use bootstrap. If you want to do css grid, just use that. Same thing with flexbox. By combining all three you’re confusing the browser.

So here’s my question to you, which out of bootstrap, flexbox, css grid, and plain old css do you know the best? Whichever one that might be, I’d say focus on just using that.

As for your questions:

1.) Which margin are you referring to? Like on which specific element?

2.) It depends on the elements they’re going on. I’ll give ya a crash course on the display attribute…

So, every html element (tag) is by default either block or inline. I believe the major three that are by default inline are <span>, <img>, and <a> tags. Inline elements have no width or height, in fact they can’t even accept those properties. So if you were to do something like this:

<a href="somelink" id="somelink"> Some link </a>

   width: 200px;
  height: 100px;

It won’t work, because as I mentioned before an <a> is inline. So, in order to be able to set a width and a height to our link we need to set the display to block:

<a href="somelink" id="somelink"> Some link </a>

  display: block;
   width: 200px;
  height: 100px;

And it’ll be the same thing with span tags.

Now doing something like this:

<div class="box">I'm a div</div>

  display: block;
  width: 400px;
  height: 400px:

Placing display block on a div element is redundant, because div’s by default are already block level elements. So you can delete that property all together.

Here’s a list of all block level elements:

And here’s a list of all inline elements while we’re at it:

Now to go back to your #2 question…typically I’ll put display: flex; on an element that I’m using as a container like this (Edit: changed for a better example of needing display block):

<div class="container">
  <a href="somelink">I'm a link!</a>
  <p>Text blah blah blah</p>

  display: flex;

Now let’s say I want to define a responsive width on that link in my container div, well first I got to redefine it as a block level element, because remember its inline by default:

.container a{
  display: block;
  width: 100%;
  max-width: 200px;

So you can definitely use display block together with display flex BUT as you mentioned before it can’t be on the same element and you’d only be using display block if you needed to change the default display of an element. Does that make sense?

3.) The background color is technically working, the problem is .headline-flex has no height. Right now it’s displaying 800 x 0. You’ll need to give it a height for it to show up.

First thing first, thank you very much for all the help!

If I uderstand you… the div does 't need block but if I have an image inside it, It sould have block to get width and height?

And I can put like

**no block **with block

and than

**again no block *flex/grid

But I cant put for one element inside the same div flex and for the second block?

By the way I made another one to check grid option:

  1. For the main image I cant get rid of the margin and make the image strach 100% width… It worked at the first but now its like in my new pen here…

Thats funny, I just move my id="img-div from to div class="container…
And put it inside my <img…> and walla, Now it’s stretching but still with margins, why is that ?

By the way, I used this to align text and logo in the grey box:

position: absolute;
top: 50%;
left: 56px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Can you tell me why it worked bt not 'justify-self:center; ?
And why the guy who wrote it needed all the three transform ?

I have to make an amendment to that. You can actually have width and height attributes on image tags without first setting it display block. BUT, there is one catch and that’s margins. In order to set margins on an image it must be set to block. You can add padding to it without display block, but not margins.

Links on the other hand DO need to be set to block in order to use width, height, and margin attributes. I believe it’s the same with span tags as well.

Personally I just automatically set images to block anyway unless I need them to be some other display type. But that’s just me.

Exactly. So for your first example that could be something like a div with a set of links inside it. Meanwhile your second example would be something like a div and then another div that you want to act as a flexbox container (or grid depending on what you’re using).

Nope you can totally do flex for the first and block or inline-block for the second inside. Again it depends on the html elements you’re using and how you want them laid out.

If I understand you correctly it looks like the gap on the sides of your image are coming from:

.container-fluid {
    width: 100%;
    padding-right: 15px; <---- here
    padding-left: 15px; <--- and here
    margin-right: auto;
    margin-left: auto;

In this case it’s not margins causing it but the padding.

Honestly, I’ve never used justify-self so I can’t help you there.

As to why he used three different transforms, that comes down to what a specific browser will recognize. Sadly they all don’t follow the same syntax. So you need these different prefixes (-webkit, -ms) for those browsers to recognize the attribute you’re trying to set.

This site will give you a breakdown of which prefixes are recognized by which browsers: What Are CSS Vendor or Browser Prefixes?

It’s a pain, but that’s just how it works for now.

I didn’t find the .container-fluid with the padding in my code… can tou copy the premit before and after?

It looks like it’s coming from the built-in grid stylesheet from Bootstrap. And just to clarify I’m working with the top pen you linked not the new grid version.

You have two options there:

Option 1

Wrap everything inside the container-fluid div inside another div with the class of row:

       <div class="container-fluid">
          <div class="row">
            <img id="image" src="" alt="Red Hot Chili Pappers - Main tribut picture">

            <div class="headline-grid">
              <img class="logo" src="" alt="Red Hot Chili Pappers's Logo">

              <div class="logo-text">
                <h1> Red Hot Chili Pappers </h1>
                <h2> A papper flavor tribute </h2>

              </div> <!-- logo-text div -->
            </div> <!-- headline-grid div -->
          </div> <!-- row div -->
        </div> <!-- container-fluid div -->

Option 2

Add this to your CSS

  padding: 0;

Now here’s something super weird, and maybe it’s just on my end or maybe it’s a Codepen thing, but I had to physically retype .container-fluid{ padding: 0; } in your CSS section for it to have any effect on the page. I tried just changing the style you already had there the “#main .container-fluid” one and it wouldn’t update. Bizarre. Could be a Chrome thing too as I’m using that right now.

So I’v tried it and yes, It solved the left-right margins but not the top, only when I gave top id=image margin-top:-24px, It fixed it… But I don’t really want to put a band-aid…

Buy the way I ask In another topic, and maybe also here,
I don’t really figure how to make all this text-logo-gray-box-thing to go to the bottom when in under than 600px, And nothing work, Not grid align/justify nor flex align/justify… Even with block… this is one thing,

The second is more for getting better understanding… Why is it when I gave to .headline-grid:

display: block;
position: relative;
bottom: 0;

Al the text went outside the image, Underneath it? How can it happened if I wrap everything under container… Isn’t the all idea behind the div container (or section etc’) to wrap every thing inside ?

Hard to say. The top two pen links are returning a 404 error now. Do you have a link to a new one that I can take a look at?

New pen’s link,

1 Like

There’s nothing I can see offhand that’s causing it…but get this, when I I use the “Tidy HTML” option in the HTML section (by the way you can find it in the little dropdown if you click the arrow in that window) the top margin goes away. Give it a shot and see if it fixes it for you too.

Do you mean the grey box that contains your logo and the page titles? And if so what behavior are you trying to get around the 600px mark?

By the way, I have zero knowledge of how css grid works, I haven’t had a chance to mess around with it yet. So if you’re looking for help with that specifically you’ll have to find someone else who knows it. What I can help you with is plain CSS and a little bit of flexbox. My knowledge of bootstrap is pretty limited too.

I’ll check this tidy thing soon…

What I can’t do, In @media , Is to take this logo textbox
and stick it to the bottom of the image… It’s like the potision and the flex/grid justify/align doesn’t respond. Sure I can leave it like that and move on but than I want learn to master css and have full control of my designings… :slight_smile:

So if I’m understanding you correctly you want your logo/title to go at the bottom of the page and act as a footer at 600px?

With css grid you can definitely do that, but there’s a bit of set up you have to do first, have you checked out any grid tutorials yet? If not I can post you some.

If you want to do it the plain old css way, we’re going to have to change a couple of things. Basically you have to put that header-box div and its contents at the very bottom of your html (like where you would put a footer), get it positioned there and laid out how you’d like it, which means stripping most of the css styling that’s on it already.

Essentially we want its default state to be a footer at the bottom of the page, then style it so it goes to the top left corner (like you have now) and then at 600px we revert it back to that default position at the bottom. Does that make sense? The thing is as it is now, you’ll never get it at the bottom of the page without a lot of positioning and in my experience that tends to have undesired results especially when you’re working with different browsers and screen resolutions. So we want to move it as much as we can with as little code as possible :laughing:

Let me see if I can put a pen together to show you a visual example, and let me know if you want those grid tutorials.

By the way…
Some one on stack flow fixed it and this is his answer:

“body & html now has a height of 100% (always do this!)
header also has a height of 100%.
removed the image from your html and applied it as a background-image on your header.
your .headline-box now has bottom: 0, which now puts it at the bottom.”

You can see the results on his pen:

Finly some ease of mind… :slight_smile: This problem kept coming back in most of my other pens

Yep I totally misunderstood you :laughing: I thought you wanted the grey box at the very bottom of the website. My bad.

Yeah that browser fix is super helpful! Here’s what I usually use myself at the start of any project:

* { 
/* styles to make borders not take on extra space */ 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 

html { 
	overflow-y: scroll; /* fix for the scrollbar push issue */ 
    width: 100%;
	height: 100%; 

    width: 100%;
    height: 100%;

/* Browser style reset so they all play nice */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, time, mark, audio, video { 
	font-size: 100%; 
	margin: 0; 
	padding: 0; 
	outline: 0 none; 
	vertical-align: baseline; 

Now just a heads up this strips everything down to bare-bones boxes. Meaning you’ll have to add margins and padding as you see fit.

What is “scrollbar push issue” ?

About html, body, div etc’, If after that You’ll need to change, Lets say, ‘Font-size’ for one of them?
You just ad like > h1 { font-size: } ? or You’ll need to go to this syntax and change it ?

It’s kinda of old throwback, I think Firefox has since fixed it but I keep for safety sake. But the issue used to be that
Firefox by default displayed a vertical scrollbar on the side of the page whether it was needed or not, Chrome meanwhile didn’t. Which ended up messing up my layouts…not terribly so but enough to irk me. What it does is force the vertical bar appear, thus making Chrome and Firefox display at the same width.
Again at this point it’s probably safe to leave out.

Yep you’d just adjust the font-size as need be on that specific element. And you can do that however you want, you can bump something up to 125% or down in percentage, you can have that element use vh or pixels or em’s, it’s up to you. But that 100% setting puts everything at the same starting size which gives you a lot of control. You’ll see that sort of mass resent in things like Normalize.css.