Display: Flex → Why is the logo image stretching vertically

.header
.logo
.header-menu

All of the above classes has display: flex set.

then why is the logo image stretching vertically →

<div class="logo">
    <img src="img/logo.png" alt="">
</div>

Live Link

Why?
The default value of align-items: stretch is causing the image inside .logo to stretch.
Remove display: flex from .logo and it is fixed. If you must have flex on .logo, then set align-items to your chosen setting.
But remember, adding display: flex to everything is not a “RWD silver bullet”. Apply flex sparingly, only where it is really needed.

2 Likes

I have deleted display: flex from the .logo class.

In order for the menu list item to come in line I was planning to give parent and child flex property by using this →

.header-menu li, .header-menu ul {
    display: flex;
}

And It also works. what is your opinion it is again ane excessive use of display;flex or here its use is judicous?

You would probably be better with:-

.header-menu li { display: inline-block ; }

No need for flex on the nav, the ul or the lis. The whole of the header is fairly rigid in layout (not flexy) with everything inline to the left. No need for any fancy tricks to do that, just normal in-line elements. Keep it simple.

1 Like

there is a margin coming in the image here.

The source of this margin is this CSS →
.sidebar-flex>.snippet-box>.snippet-text {margin: 0 10px;}

the above works on img, h2, and p

In order to nullify its effect om img I tried this →

.sidebar-flex>.snippet-box>.snippet-text img {margin: 0px;}

but that didn’t work. How to get rid of margins only on images.

Of course that won’t work, there was no margin on the img to begin with, the margin is on its parent container, so setting it to 0 on the image will change nothing.

You already know where the margin is coming from, so you know where to remove it from.

what should I do? I want margin over h2 and p, but not image. the immediate solution that I can think is that I need some extra div so that I can take img part out of the snippet-text div to manage this? what is your suggestion?

Taking the img out of the snippet-text box is the solution. You don’t necessarily need an extra div, just cut it out and paste in before the snippet-text.
Oh, and remove the (unnecessary) flex from the snippet-box, as that will interfere with things.
What did I say about applying flex to everything?

1 Like

Sir,

there is a specific reason why I have used flex here. there are 3 places where exactly the same code is used →

  1. https://www.screencast.com/t/WZSS3dwEw6H
  2. https://www.screencast.com/t/vtC9uZtX37DL
  3. https://www.screencast.com/t/bXJi604U4s1

The transition when the sidebar is changed form full width to a narrow say 30% was easily achieved by just one piece of code (w/o adding any extra class or complicated changes, and their won’t be any need for scripting when converting to wordpress)→

.sidebar .snippet-box {
    flex-basis: 100%;
    margin-bottom: 20px;
    }

that’s the reason I chose flex for this.

I don’t see it.
What are you doing that cannot be done with ordinary old css?
flex-basis is a property of a flex child, not a flex container.
Additionally setting it to 100% is just like having an ordinary element with width: 100% (where the default width: auto would probably be preferable).

1 Like

By just removing display: flex from .snippet-box and putting image outside the div the issue is solved. Thanks!

1 Like

sir,

I have highlighted the part in blue color. I want to flow these items to the right, but is that possible that somehow I can do it w/o using the float property. because in some other post you or Mr. Paul told me that this is now an old school. secondly, handling float sometimes may be problematic as it causes that clear fix issue. can we do it by some other means?

#2
You can see a purple color arrow I want that arrangement to look somewhat like this. please help me to that in such a way that when there is no “Video” text or h2 the image takes the whole width.

Example 4 in my flexbox patterns demo shows how to move items to the right with a simple margin-left:auto. Looking at your demo it seems you have already found this out :slight_smile:

You also seem have solved the video text you were asking about :slight_smile:

1 Like

Yes sir, those things are fixed for now. Thank you for replying.

I am unable to align this in one line like this.

But we have to write CSS in such a way that this part remain as it is. → since the code is motsly same in both the places.

Live Link.

I am travelling back from holiday today so it may be a day or so before I can look at this unfortunately.

Therefore if anyone else meanwhile wants to jump in please feel free :slight_smile:

1 Like

You can align that last item to the right with flex by using margin-left:auto on it as demonstrated in my flex examples I linked to above. I would place all the right items in one parent flex-item but remember that flex-items (direct children of a flex container) can be both flex-items and flex-boxes at the same time.

You can therefore give the flex item a display of display:flex and that allows you to layout the children of that item in the way that you need and to also re-order the content in that section for smaller screen.

The right item would probably need to contain two divs (flex items) but there are other possibilities.

I won’t offer specific code as I think you know enough to make a start on this now :slight_smile:

1 Like

Thanks, I will give this a full-fledged try and will let you know the outcome, and I hope you had a wonderful vacation and you are now full of new energy for the second half of this years and many more years to come.

1 Like

I have accomplished that successfully as per your instructions. Thank you so much.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.