Questions tagged [css3]

32065 questions
1

votes
3

answer
1.8k

Views

force last div on a new line with flexbox [duplicate]

This question already has an answer here: Force flex item to span full row width 2 answers I have this HTML plus this CSS .wrap { display: flex; align-items: center; } .one { flex: 0 1 200px; } .two { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; } .three { display: f...
Happy Andrei
1

votes
1

answer
737

Views

How to set a specific flexbox gap in CSS

I'm trying to achieve a flexbox layout with just one flex-grow element and a variable number of smaller elements around it. I need a gap between the elements that's a fixed width - exactly one pixel. Here's a diagram of what I want: The blue element grows to fill the space, but has a 1px gap in betw...
Jae Kwak
1

votes
2

answer
2.1k

Views

align-content: center not working in Chrome

I am trying to vertically align divs with flexbox, by using the align-content: center. It works fine in Firefox and IE, but it does not vertically align in Chrome. In Chrome the divs stays on top. Title Text. Title Text. Title Text. And CSS: .products-wrapper { width: 100%; min-height: 100vh; /* FLE...
Nifel
1

votes
2

answer
2.5k

Views

bootstrap 4 container-fluid is not full width after removing the default padding

I want to make a full width web page by Bootstrap 4. I try to remove the original 15px padding of container-fluid, but it is still not working. Details on jsfiddle. I marked the whole background as purple but u can see the jumbotron is not fully cover on the purple background. .container-fluid { pad...
asservir
1

votes
2

answer
111

Views

Why does order of transforms matter? SVG rotate/scale doesn't give the same result as scale/rotate

After combing through the SVG specification, and guides such as this and this, I am still struggling to understand exactly how chaining transforms work. Selected Relevant Quotes When you apply the transform attribute to an SVG element, that element gets a 'copy' of the current user coordinate system...
Magnus
1

votes
2

answer
57

Views

Stroke animation, how to attach another path to the appearing stroke?

I have the following animation: @keyframes dash { to { stroke-dashoffset: 0; } } #currency-chart-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 30s linear forwards; } Run the code snippet to see the animation. I want to attach the arrow to the stroke so it look like...
Dimitri Kopriwa
19

votes
3

answer
1.1k

Views

What is a good way to write CSS for multiple borders? [duplicate]

This question already has an answer here: How can I get multiple borders with rounded corners? CSS 8 answers I am trying to build multiple borders which are getting faded around the user image. I am writing the CSS like this, but this won't help: width: 90px; border-radius: 50%; box-shadow: inset 0...
Piyush
5

votes
3

answer
62

Views

Make a CSS Grid fit the minimum amount of space

I have something like this : .row { width: 300px; border: 1px solid black; display: flex; } .otherstuff { flex-grow: 1; } .grid { display: grid; grid-auto-flow: column; gap: 10px 10px; } .cell { border: 1px solid blue; } Stuff Cell 1 Cell 2 I would like the grid to take up only the...
Strebler
1

votes
1

answer
41

Views

Resize outer-div (relative pos) min-height to height of inner-div (absolute pos)

I'd like to have a couple of divs that are at least the height of the viewport. .fullheight { position: relative; min-height: 100vh; } Each of those contains other divs and in case the content is taller than the viewport-height, the fullheight div should grow. While that works well if the content d...
dan
1

votes
3

answer
55

Views

How to remove extra border on “page' broken” table?

I have a long table, multi-page table thats breaks between pages. The table has borders and border-collapse as collapse. But on printable preview - there is some extra border. How can I remove it? Here is working example https://codepen.io/anon/pen/MxLjvK text text text text
Molfar
1

votes
3

answer
42

Views

I can't get image to display using Javascript

Am working on a quiz where i need an image to show good or bad when i click submit, if the correct or wrong answers are chosen. But i keep getting only one image displayed. HTML What is the capital of Nigeria? Which of these is the symbol for 'plus'? x - + % JAVASCRIPT function getResult() { let ans...
Barri
1

votes
3

answer
48

Views

How can I align divs correctly to fit page width without overflow?

Okay so I am playing around with flex box, I have created this simple layout of divs but I am evidently formatting them wrong. I have put a div at the top for 100% so you can compare where the divs end. Is there a way to align the divs to fit the page? I thought that simply adding some % width stat...
Shayrapet
1

votes
2

answer
70

Views

Line before and after text not responsive

I am trying to have a line before and after my text but I want it to be responsive and currently the only way I can find is by using width... so its not responsive. I would prefer to use before and after psuedo elements only but if its not possible then I am find with another approach. HTML: Testing...
HeelMega
1

votes
4

answer
57

Views

How to make space between elements inside div container

I have a flex-container which will be dynamically filled by elements. Container doesn't have fixed width (I use max-width: max-content;) and can contain as many element as I want. The problem is that I need spacing between these elements, but don't need spacing on the left and right side between an...
Yas'ka
1

votes
1

answer
39

Views

How to make a dynamic area in CSS Grid without affecting other areas?

So here is the problem. I want a layout that looks like this, where C grows dynamically with more content. However, this is what I am getting. Basically, the row of A is growing together with C: My wrapper code with template-area: wrapper{ display: grid; grid-template-columns: 0.64fr 1fr 5fr 0.64...
user3577478
1

votes
3

answer
61

Views

change grid layout on click event

Is it possible to change a grid layout on a click event? I have a grid display of three rows and I want the grid to be changed to three columns when an item in the row is clicked. .gridcontainer { display: grid; grid-template-rows: 1fr 1fr 1fr; justify-content: center; } .gridcontainer { displ...
sum
1

votes
2

answer
24

Views

Pause animation between each rotation for five seconds

I am working on this demo. How can I add five seconds delay to this animation between each rotate? .card { background: #00f; width: 100px; height: 100px; animation: rotate 4s infinite; -webkit-animation: rotate 4s infinite; } @-webkit-keyframes rotate { 100% { transform: rotate(90deg); }...
Mona Coder
4

votes
4

answer
34

Views

Using Flex trying to get boxes as per images

I am using flex property.I want 1. box to the left and 2.&3. to the right. .flex{ display:flex; flex-wrap:wrap; width:400px; } .flex > div{ flex: 0 0 50%; } .flex .one{ order:1; background: red; } .flex .two{ order:2; background: green; } .flex .three{ order:3; background: blue...
Pullata Praveen
0

votes
0

answer
3

Views

customizing images sizes in bootstrap carousel

I am trying to make simple carousel using bootstrap and im having a problem with image sizes, i want it to be full screen images. I tried adding margins and paddings but it doesnt work. any help ? here is my code
Nor Elhouda Gribi
5

votes
1

answer
30

Views

How to keep a window-wide sticky element from scrolling within a wider block?

I'm developing a web interface that involves a lot of scrolling, utilizing sticky positioning, which works beautifully except for one little detail. Below is a minimalist example. You can try it on CodePen to see how the stickies work when scrolling horizontally and vertically. Menu bar item Button...
Martin Laakso
18

votes
3

answer
1.1k

Views

What is a good way to write CSS for multiple borders?

I am trying to build multiple borders which are getting faded around the user image. I am writing the CSS like this, but this won't help: width: 90px; border-radius: 50%; box-shadow: inset 0 0 0 4px #eee, inset 0 0 0 8px #ddd, inset 0 0 0 12px #ccc, inset 0 0 0 16px #bbb, inset 0 0 0 20px #aaa, inse...
Piyush
1

votes
2

answer
257

Views

How to show a child element which is obscured by its parent's overflow:hidden style setting

I have a rather weird scenario that I was wondering if it would be possible to overcome. I have a HTML block element with fixed dimensions which is also styled as 'overflow:hidden'. I want to position a div which is nested-child of this element at a certain offset. The child div has the same dimens...
Ashwin Prabhu
1

votes
3

answer
4.5k

Views

How do I remove the bottom border of my selected tab

How can my current HTML/CSS coding be modified such that, once a tab selection has been made, that the bottom border will be removed? Here's what it presently looks like: Here is the desired outcome: Here is the code: JavaScript tabs example ul#tabs { list-style-type: none; margin: 30px 0 0 0; paddi...
Jason Kelly
5

votes
1

answer
42

Views

What is good way to write CSS for multiple borders?

I am trying to build multiple borders which are getting fade around the user image. I am writing the CSS like this but this won't help. width: 90px; border-radius: 50%; box-shadow: inset 0 0 0 4px #eee, inset 0 0 0 8px #ddd, inset 0 0 0 12px #ccc, inset 0 0 0 16px #bbb, inset 0 0 0 20px #aaa, inset...
Piyush
1

votes
4

answer
11.7k

Views

padding/margin bottom not working, i want to understand why

I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code. html My Webpage css #Container { position: relative; width: 96%; height: 98%; left:2...
Sai
-1

votes
0

answer
13

Views

How do you make an responsive css grid where the columns are not equal sized

I'm trying to make a responsive banner. This banner has 4 images and 1 text box. It should line up something like this: image image [ text ] image image I want to be able to make it go from that to a single column when the page is small enough. I tried doing: grid-template-columns: repeat(auto...
user2963379
-1

votes
0

answer
13

Views

How to make form display marquee after submitting?

I'm trying to create a section in which the information submitted by user thru a form is displayed as a marquee! I don't know what exactly should I use to make that happen? Here are the code for the form: html, body { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: gr...
whitefire
1

votes
2

answer
1.1k

Views

How to make semantic html horizontal definition list with auto width?

Semantic inline definition list in html : Item 1 def. 1 Item 2 def. 2 How to render this in 2 columns using only css (no js) and auto-width each column ? Easy using fixed width or percent width, but I didn't find any solution with auto-width. (I tried flexbox and multicolumns) Any idea ? Thanks
migli
1

votes
1

answer
328

Views

Flexbox child : any way to reset “display: none”?

Typically I set lengthy menus on my mobile site to an initial display: none and use a Javascript 'Expand' button to switch them back to display: flex (or whatever). But this time around, I can't hide the flex parent. I have to hide only certain flex children, because certain others must be visible....
Lee Saxon
0

votes
2

answer
18

Views

How can we hide background content of div?

Hello everyone I am learning HTML and CSS I have question regarding hiding div background content or background view. want to show only current div content. I have div in that I am showing some content.But facing some problem while its displaying.I am showing this div but its also showing background...
Kanekar
1

votes
2

answer
1.9k

Views

Scrollbar focus on the bottom of the HTML div

How do I make this scrollbar focus on the bottom of this div. Does JavaScript is necessary?
0

votes
0

answer
17

Views

bootstrap 4 col-sm issue with flex-direction column

A section on the site for col-sm needs to display as columns. In my case for 577767, both the divs are showing as rows and are not taking the full width as well. When i disable the flex-direction: column, only then the two divs show as columns for col-sm. When i change the same to col-med, above be...
learning...
0

votes
0

answer
5

Views

NGX-DATATABLE RowClass select particular column or cell within row

Instead of selecting the entire row like this I just want to select 2 cells like this using data from rows, is there a way I could achieve this?
Jin
1

votes
6

answer
76

Views

How do I vertically align all the fields in my form?

#application-form label { display: block; padding-bottom: 30px; } #application-form input, select { margin-left: 50px; } #application-submit { margin-left: 0px; } #checkbox-agree { margin-left: 0px; margin-right: 10px; } What are you wanting to buy? Make and model: * How much do you w...
Grey-lover
1

votes
3

answer
47

Views

Repositioning elements out of the general flow on mobile

I have a situation where I have I guess what you would call a primary area and a side area (not a general sidebar with unrelated content), such as: That is how it is displayed on desktop, however on mobile it would be ideal if they displayed by their numerical importance displayed in the image. Howe...
Brett
1

votes
3

answer
83

Views

Scale a div without changing the size and position of its child elements

I have a div that contains some elements like h and p tags. How can I scale just the wrapper div, not inner elements? title description
Mina
1

votes
2

answer
41

Views

Why do my paragraphs overlap each other when using CSS Grid layout?

I'm new to CSS Grid. My problem is that when I set display: grid; on the parent element that contains two mere paragraphs , the paragraphs overlap one over the other rather than stacking normally one on top of each other, hence, making the container expand its height. Two questions: Why is this hap...
Ricardo Zea
1

votes
1

answer
39

Views

Skew only one side of before & after to get flat-arrow

I've created some dummy breadcrumb-steps. The 1st breadcrumb-step need to have a normal flat border on the left, which is done. And on hover, I need to show the black border for each breadcrumb item. But the only problem is on hover, for the 1st breadcrumb-step, I don't get that flat border on the l...
Sunny
1

votes
3

answer
34

Views

creating responsive grid sytem and ordering

I have a simple section which I am creating for my app, this section contains one row with 3 columns each column have 3 divs. JSFIDDLE: demo Here is what it should look in desktop view Here is how it should look in small device so far here is my solution I tried, but am not getting what I want . HTM...
user9964622
1

votes
4

answer
87

Views

Booststrap 4 Grid System , I'm not able to achieve this layout

I can do this layout in normal CSS using flex and grid, But I need to know how to do this using bootstrap 4, There is nothing left to try . d d d z This is what I need to get
Thanveer Shah

View additional questions