responsive

I can't figure out why there is space to the right of the first step when i write more then 13 letters in it. If i only write step 1 then it's fine. See below the code. Or visit my codepen . Can someone put me in the right direction, please. I have also included some screen shots when it's working properly. HTML <div class="container"> <ul class="progress--bar"> <li class="active">Step 1 space to the right</li> <li>Step 2 is good</li> <li>Step 3 is good</li> </ul> </div> CSS .container { text-align: center; color: #20BEC6; margin: 30vh auto; .progress--bar { counter-reset: step; display: table

I'm trying to create a Grid of Tiles with Bootstrap with the following properties: all tiles should be squares horizontal and vertical gaps should be the same (even the same compared on different screen-widths) the tiles should always be centered in the middle of the screen(distance from the left edge of website to the left border of the leftmost tile = distance from the right edge of the website to the right border of the righmost tile) It should look like this: body{ background: #a5b5c5; background:lightblue !important; } .box{ height: 180px; width: 180px; background: #fff; border-radius:

I've found a lot of threads here talking about CSS and mobile screens. After my searching, i couldn't find solution for some devices. For example: Motorola Moto G4 Plus uses FULL HD width(1080px), only bootstraps detect the xs-view configuration. Styling and trying and trying i couldn't get some styles setted up. So, how can i make the same procedure as Bootstrap to set up my styles and in general procedure for all devices? Please, only CSS or as much JS(if it possible, don't), the same as bootstrap. I've tried @media screen and @media all queries. Doesn't work. Thanks for reading. Virgil de

I'm new to using Vaadin and have been trying to work out how I can make 2 Components be side by side when at full screen, but then stack on top of each other when the screen is mobile. My current understanding is that a HorizontalLayout puts things side by side. And a VerticalLayout puts things on top of one another. So how do I go about using the functionality from both? You need to look into using a different Layout type. Vaadin offers you a CssLayout and CustomLayout as well as the standard Vertical and Horizontal. My personal favourite at the moment is using a CssLayout and then using a

When I am in full screen mode in android using fullscreen api, the values of meta viewport attribute like initial-scale and user-scalable are not reflected in the browser. If I am not in full screen mode, the values of meta viewport are reflected. You can check it by accessing MDN:Fullscreen api example from a mobile browser I don’t find any source saying meta viewport will be disabled in fullscreen in android. So am I making any mistake or no one has documented it? Also pinch and zoom is disabled when in fullscreen Raised a issue in https://github.com/whatwg/fullscreen/issues/111 but no luck.

I want to make a navbar using Bootstrap 4 and Angular 2 that collapses his content on a button when the width of the browser reaches some value. I achieve this, and when the navbar collapses I can see the button that encloses the elements in the navbar, but this button doesn't work. How can I fix this without using jquery? I was trying to use ng-bootstrap. In the image you can see the button when the navbar collapses. My code so far: <nav class="navbar navbar-expand-md fixed-top navbar-dark custom-nav"> <span class="navbar-brand mb-0 h1">Partes vehículos</span> <button class="navbar-toggler"