Responsive

[stark21]

Hello everyone,
I am trying to make a responsive notification bar but when I resize the screen list items breaks up and text is going beneath I want it to be inline as screen resize.
Here is my code.

<div class="notification-bar">
        <ul class="notification-list">
            <li class="list-item list-item1">
                <span>Lorem ipsum dolor sit amet.</span>
            </li>
            <li class="list-item list-item2">
                <span>Lorem ipsum dolor sit amet.</span>  
            </li>
            <li class="list-item list-item3">
                <span>Lorem ipsum dolor sit amet.</span>  
            </li>
            <li class="list-item list-item4">
                <span>Lorem ipsum dolor sit amet.</span>
            </li>
            <li class="list-item list-item5">
                <span>Lorem ipsum dolor sit amet.</span>
            </li>
        </ul>
    </div>

And here is CSS.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.notification-bar {
    background-color: #222;
    color: #FFF;
    font-size: 14px;
    line-height: 16px;
    padding-left: 59px;
}
.notification-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    height: 40px;
    align-items: center;
}
.list-item {
    padding-left: 42px;
}

[stark21]

Here is HTML, I am sure that I copied

    <ul class="notification-list">

        <li class="list-item list-item1">

            <span>Lorem ipsum dolor sit amet.</span>

        </li>

        <li class="list-item list-item2">

            <span>Lorem ipsum dolor sit amet.</span>  

        </li>

        <li class="list-item list-item3">

            <span>Lorem ipsum dolor sit amet.</span>  

        </li>

        <li class="list-item list-item4">

            <span>Lorem ipsum dolor sit amet.</span>

        </li>

        <li class="list-item list-item5">

            <span>Lorem ipsum dolor sit amet.</span>

        </li>

    </ul>

</div>

[Corobori]

Did you specify the viewport ?

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

[stark21]

Yes, I did.

[Pepster64]

I don’t know if this is what you are after?

https://codepen.io/Strider64/pen/WNONGWy

/* Approximately the size of an iPad Pro 12.9in 1024px */
@supports (grid-area: auto) {
  @media screen and (min-width: 64em) {
* {

  box-sizing: border-box;
  font-family: Arial, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
.notification-bar {
  background-color: #222;
  font-size: 0.875em;
  line-height: 1.5;
  color: #fff;
  padding: 1.250em;
}
.notification-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center;
  height: 2.5em;
}
.list-item {
  padding-left: 2.50em;
}

} }

Personally I think you should be working in em instead of px when doing responsive web design. I would also suggest looking into media queries and design for mobile first.

[stark21]

@Pepster64

* {
  box-sizing: border-box;
  font-family: Arial, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
.notification-bar {
  background-color: #222;
  font-size: 0.875em;
  line-height: 1.5;
  color: #fff;
  padding: 1.250em;
}
.notification-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center;
  height: 2.5em;
}
.list-item {
  padding-left: 2.50em;
}

No, that’s not it, I want it to be inline just like it is, if it is possible of course.

[Pepster64]

Well, that’s going to be tough for small screens such as mobile devices. I would suggest having 100 percent width on mobile devices then use media queries for large devices (mobile first responsive design). I would look into flex-wrap also other flex options as well - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[stark21]

For mobile screen I will use bootstrap carousel but 'till the mobile screen size I want it to be inline.

[Pepster64]

Sorry, I can’t help you there as I don’t do bootstrap as I like having total control with pure CSS. Maybe someone else can help you.

[stark21]

Thank you for sharing your opinion.

[PaulOB]

@stark21

I want it to be inline as screen resize.

@stark21

No, that’s not it, I want it to be inline just like it is, if it is possible of course.

Can you clarify what you want to happen as I don’t know what that means

Do you mean you don’t want the text to wrap but stay on one line? If so then you will reach a minimum screen size very soon.

e.g.

Is that what you are looking for?

If so then what should happen when the screen is a little bit smaller than that as the text will need to wrap or to go somewhere?

[stark21]

I want it to stay on one line, not to wrap.

[PaulOB]

Like this?

If it doesn’t wrap you will have to hide the overflow or have a scrollbar appear.

I don’t think I’m understanding what you want yet though

[stark21]

No, I still want those 5 lists to be on screen.

[PaulOB]

@stark21

No, I still want those 5 lists to be on screen

How is that possible?

The only other option is to wrap the text but you said you don’t want that?

It may be better if you give me a drawing of what you want at large and small screen sizes then I will tell you how to do it

[stark21]

Okay, I thought that there is a way, so there isn’t. Thank you!

[wake689]

We’re still not clear what you want to happen when things shrink such that the end of one “amet.” touches the start of the next “Lorem”. You don’t want the text to wrap. You don’t want it to go off the edge of the screen, with a scroll bar. You don’t want it to overlap. What do you want to happen at that stage? Are you wanting the text to get smaller? It would very soon become unreadable.

[stark21]

No, I want it to shrink as screen resize, no wrap, no overlap , I want text be the same.

[Gandalf]

Can you mock-up an image of what you want it to look like?

[PaulOB]

I’m guessing its like this:

That uses clamp for responsive sized text.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
.notification-bar {
  background-color: #222;
  color: #fff;
  font-size: clamp(.3rem, 1vw, 1rem);
  line-height: 16px;
  padding:0 2vw;
}
.notification-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  min-height: 40px;
}
.list-item {
  padding:10px 1vw;
  flex:1 0 0;
  white-space:nowrap;
}

Of course its too small to read at small screen sizes but will be larger at larger screen sizes. Note also that some users will have a set a minimum font-size in their browser controls and that will always over-ride the css.