Search between a Gas Station

center elements within a polygon div container currently I have a div container with text in it. div { height: 200px; background: red; } p { text-align: center; } <div> <p> Text goes here </p> </div> and I want this div container being a parallelogram with a vertically centered text in it. div { height: 200px; background: red; clip-path: polygon(0 25%, 100% 0, 100% 25%, 0 50%); } p { text-align: center; } <div> <p> Text goes here </p> </div> as you can see here, the text completely disappears because the css only works for the div container. How can I make the text appear in the vertical center of this parallelogram? Edit: I don't know if using clip-path: polygon(0 25%, 100% 0, 100% 25%, 0 50%); is the best way to create a div container that is skew. 1 Answer 1 Use gradient to create the shape as background and you sim...

flexbox columns and IE Everything works fine in Chrome and Firefox but guess what, I have a problem in IE! (IE11) In my responsive layout I want to menu to be horizontal in pc mode and vertical in tablet/mobile mode. It does just that, but in IE the menu items have no height. They all collapse to 0 height if inspected with the developer tool. I can't find why. Anyone would have an idea? I made a codepen for it: http://codepen.io/Reblutus/pen/qjacv Here is the code <style> header { background: cyan;} nav { background: bisque;} .main-a { background: tomato;} .main-b { background: lightblue;} footer { background: lightpink;} .headerContainer nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: column nowrap; flex-direction: column; } .headerContainer nav > a { padding: 5px 10px; text-align: center; background: #fcd113; border: #6eac2c solid 1px; border-width: 0 0 1px; -webk...

No validation don't show next fieldset I'm creating a multi-step form using this example - codepen.io/orozcokapo/pen/LmgjYg codepen.io/orozcokapo/pen/LmgjYg But, I want that in second fieldset, first validate required input textfield (I am using only one Textfield on second fieldset for mobile number input) and the button to go to the next step should work if the required field is not empty. I am unable to code it in JQuery. Could you please guide me how to do that? 1 Answer 1 First, designate which inputs are required by giving them the required attribute. Then, at the Next button's click function, move current_fs = $(this).parent(); to the top and add this code required current_fs = $(this).parent(); var inputs = current_fs.find("input[required]"); if(inputs.is((i,el) => $(el).val() == "")) { alert("Please fill out all required fields"); retur...

How to make content wrapper “on top” of css grid I'm working on a site layout using a two-column CSS grid, which looks somewhat like this. It works fine and all the content centers perfectly in each div. The cells with "bg" just have a background image. Each grid cell "touches" the borders of the browser window. +--------+--------+ | text | bg | +--------+--------+ | bg | text | +--------+--------+ | text | +-----------------+ However, is there an easy way to wrap & center the content so that it doesn't go beyond a certain width? I could target individual paragraphs to align left or right depending on their cells, but I was wondering if there's a more elegant way to do this? The brackets are the "wrapper". +--------+--------+ | [text| bg] | +--------+--------+ | [bg |text] | +--------+--------+ | [ text ] | +-----------------+ Please post the code you have tried. ...

How do I make this responsive properly? I've been trying to make this slightly custom bootstrap carousel truly responsive so that the hero text & button scale correctly. I've used a mix of the grid and breakpoints but I just can't seem to be able to scale things correctly unless I use 20 breakpoints to ensure the text is the right size so it doesn't get pushed out of view. See this pen for a demo <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner...

How to create an empty div flex? [on hold] I'm currently writing a website where I want a particular section to start 15% down the page and fill the remaining 85%. I want the top 15% of the page to be totally empty. The only way I can think of doing this is to create an empty div styled with flex: 0.15 . This seems really nasty but does what I want it to do. Is there a better approach for this that doesn't involve using an empty div? div flex: 0.15 Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question. Please provide a Minimal, Complete, and Verifiable example. Please look at guide how do I ask a good question? – Andrzej Ziółek Jun 30 at 14:38 ...

Why is nth-child selector not working in css? [duplicate] This question already has an answer here: I am using the nth-child selector to add border-color for different social list-group-item . What am I doing wrong? nth-child list-group-item .list-group-item:nth-child(1) { border-right: 3px solid yellow; } .list-group-item:nth-child(2) { border-right: 3px solid red; } .list-group-item:nth-child(3) { border-right: 3px solid green; } .list-group-item:nth-child(4) { border-right: 3px solid blue; } .list-group-item:nth-child(5) { border-right: 3px solid lime; } .list-group-item:nth-child(6) { border-right: 3px solid red; } <div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6"> <div class="views-field views-field-title"> <span class="field-content list-group-item">Yahoo<a href="/app/wall/content/"></a></span...

Flexbox align div in center [duplicate] This question already has an answer here: I'm using flex and I want to align the div filho in the center of div pai , I try use justify-content: center , but don't work because there insn't space left, and I can't set a with to each div. div filho div pai justify-content: center .pai { display: block; background-color: #f3f5fd; margin: 0 15px 15px; } .filho { padding: 10px 50px; width: 100%; display: flex; justify-content: center; align-items: center; height: 100%; } .item1 { min-width: 210px; } .item2 { height: 100%; display: flex; align-items: center; flex: 2; } .item2 img { max-height: 100%; width: 100%; } .item3 { display: flex; align-content: center; } <html> <head> <title>teste</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="pai"> <div ...

How do I stop form overlapping header from scrolling? Hello I am working on a site that needs a form overlapping the header like this: Site example. So far In my rough draft I was able to make the form overlap the header, but it moves down when i scroll the page. I have attached pictures before and after the scroll as well as my code. Before scroll: before scroll After scroll after scroll html/css:code <head></head> <head></head> By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.