Questions tagged [css3]

23849 questions
1

votes
2

answer
7k

Views

Make submenu dropdown wider than parent li

I did the job by make the submenu functioning, the problem is I can't get the submenu width wider than its parent. when i hover, its messed up as you can see in fiddle links i provided below please take a look at this http://jsfiddle.net/wR5L5/ .navigation { height: 35px; background: #333; } .navig...
robbiejobs
1

votes
1

answer
4.2k

Views

Creating very large form elements with twitter bootstrap

I want to create a form for my front page that has very big elements, so I'm thinking I just define some custom css classes, but I'm struggling with how exactly I'm meant to scale everything up, eg padding, line height, etc. to match font size. I'm thinking of having a horizontal form with labels an...
Tesla
1

votes
1

answer
516

Views

Why use media query type “all” when it's implied?

I recently noticed that I have been using all in every @media query rule and I can't figure out why I did that. I've searched the web and I see that most @media rule examples on the web use some format like this @media all and (some other condition...), why is there media type all when it's already...
Igor Jerosimić
1

votes
3

answer
93

Views

CSS 3 animation not working when width or height is provided

I apply width-transition on a div element and the animation on it works perfectly. But providing height and width to the same div in CSS prevents the animation. What am I missing? On hover, neither color nor animation changes. How do I provide common styling for all divs: Default styling Styling on...
Mahesh
-1

votes
0

answer
22

Views

Support landscape and portrait images in bootstrap carousel

The goal is to display up to 3 vertical images on the screen. The images sizing allows up to 2 horizontals or a single horizontal and a single vertical if it fits. The sizing on the horizontals is about 66% or col-md-6, with the verticals being about 33% or col-md-4. I can't sacrifice the quality o...
Austin Sweat
2

votes
2

answer
22

Views

Defining fr for grid only for first and second child of ul

I am creating a navigation for a website with ul li. There are currently 7 link in it. I've set the display of ul to grid with repeat(7,1fr). However I want the first and second li to be .5fr and 1.5fr. How can I do it? nav ul { display:grid; grid-template-columns: repeat(7,1fr); } How I want it to...
Andy Brooke
1

votes
2

answer
5.6k

Views

How to center two columns using CSS without using a fixed width container?

I have seen this thread which answers how to center two columns given that you know the total width of both columns in pixels. What if I don't know that or don't want to hard code that? If I at any point want to change the width of the columns I need also to recalculate the with of the wrapper manua...
Nilzor
1

votes
2

answer
6.3k

Views

How does one prevent a fixed element from scrolling over or under another element?

Despite my searches on Google and this site, I haven't been able to find an exact solution to my particular problem. I have a page with a fixed header and a fixed navigation div which is located in the main content along the right side. When the page is scrolled to the bottom, the footer scrolls ri...
DondeEstaMiCulo
-1

votes
2

answer
27

Views

Position Elements in CSS3

I'm trying to create a simple layout with HTML5 + CSS3 as pictured below, for a high school job, however, I'm not aware of programming and I'm having difficulty with placements in CSS3, this is the codepen I'm doing, and that's the layout image how do I need to stay, can you help me? Thank you =) My...
Allison1
1

votes
9

answer
1.5k

Views

How do you float elements without a vertical gap?

I am trying to float elements left. Here is my css: width: 320px; float: left; border: 1px solid #ccc; margin-top: 10px; margin-right: 10px; border-radius: 5px; My Generated Output But i want to show my div in this format like Please help me out. How do I prevent the vertical gap using CSS?
1

votes
1

answer
12.1k

Views

icoMoon fonts setup, icons not showing up

I am not able to display my icon fonts. This is the directory structure I have: _ folder containing css and fonts folders outside of the _ folder I have the demo1.html page This is the code I am using for setting up the fonts: @font-face { font-family: 'icomoon'; src:url('_/fonts/icomoon.eot?-9hqo5...
user2371684
1

votes
1

answer
1k

Views

CSS transition on element leaving lines

I have placed a hover transition on an absolutely positioned element. The hover state applies a box-shadow to the heading element to mimic it filling the area (to get around the fact you cannot transition from a property set to auto). In Chrome only, when the transition is reversed, there are a bunc...
nickspiel
1

votes
1

answer
1k

Views

Text Lay Over Header Image

I have the following HTML, but can't seem to get the text to LAY OVER the image. I'd like the h1, h2, and ul li tags to LAY OVER the image. I know I can put the image in CSS, I just need to know how to edit the CSS (or HTML?) so the text will LAY OVER the image. ![enter image description here][1]...
Val Sedano
1

votes
2

answer
4.3k

Views

Centering SVG horizontally

I don't have a lot of experience using SVG on the web. I am working with a bit of SVG that is, essentially, uploaded via a CMS, so I have no control over it. I have a bit of demo SVG code I am working with, but I am unable to center (horizontally) it! svg { margin:0 auto; } The code above does not w...
peduarte
0

votes
4

answer
16

Views

Flex divs with 50% parent width wrapping when not suppoused to

I feel stupid for not being able to figure it out but for some reason I cannot make those divs to stay in one line. I expect them to be next to each other in one line since they both have half of parent divs width while keeping flex wrap in case if I added more divs. Here is my code .aside__item {...
aMJay
1

votes
3

answer
20

Views

Weird random periods/dot in my responsive timeline

So I copied this responsive timeline from codepen because I am lazy to create an entire responsive timeline. I modifed it to what I need for my website. Although there is just one very annoying minor problem that I want to get rid of and that is there is this period on the left column in the last li...
Azazel
1

votes
2

answer
156

Views

CSS3 backface visibility on grand children of rotating element

Note: CSS is in the codepen examples CONTEXT: I want to rotate a set of elements (lets call them parents) aligned as a column. Each parent has 2 children (2 faces: front and back). The animation is going to be added later in time with JavaScript and for the purpose of the question, lets say that th...
pgarciacamou
1

votes
1

answer
4.3k

Views

Element centered with translate(-50%, -50%) - transition not working

I have a div: which is centered on screen using these css properties: .element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Now I want this div to change its height after adding a class .bigger { height: 80%; } but I want it to animate, so I added a transition prop...
user1091733
1

votes
3

answer
10.6k

Views

Set a background color to button when clicked using CSS

How do I set a background color to my when it's clicked using css? .myBtn { background-color: #fff; cursor: pointer; color: #000; text-decoration: none; text-transform: uppercase; } html: Highlight me when Clicked
Becky
1

votes
4

answer
789

Views

How to make floated div container fit to the div height?

I have a div container #parent and a div child #child who's child of the parent div . The #child div contain text and he is floated left, the problem is that I want the #parent div to fit the height of the #child` div what ever the height is with keeping the float property also . #parent{ backgroun...
Abddoo
1

votes
1

answer
65

Views

Unusual Responsive Table Functionality

I'm trying to make a responsive table for a Cafe's menu. The days of the week are the headings of the columns, while the type of food are in the rows. When the table goes into mobile view, I'm trying to get each column to appear as a separate card. Please see below for a visual example. From this:...
Oliver Evans
1

votes
3

answer
1.5k

Views

CSS3 - Animation Scale/Rotate on Hover

I tried and wrote this code but it have a problem, first issue is text inside div will be fuzzy (fluffy)! and second scale animation not play softly, all i want is play animation softly, scale once then rotate infinite on hover. @-webkit-keyframes socialspin { from { -webkit-transform: scale(2) rot...
ITSolution
1

votes
3

answer
172

Views

Div Max Width Alternate When Div Overflow

I am trying to limit the max-width (without width) (max-width somewhere beyond screen length) when div gets a horizontal scrollbar (scrollbar when zoom or lengthy text in div). It is not possible but, what exactly can work for me, is browser to treat div overflow as it is inside screen but "just ad...
Mr. Rick
0

votes
1

answer
27

Views

Set max-height to the lowest height of the sibling div

I know how to match the height of divs, which doesn't have much content, to match their height to the div which have most content using flex. Now, I want to match the hight to the lowest content. For example, I need to add a scrollbar to the div which have more content and the max-height of that div...
Asim K T
0

votes
0

answer
7

Views

Huge problem with div with position fixed on Safari

I have a header, positioned fixed on mobiles, so it can scroll down together with content. But sometimes very strange thing happens - Im able to drag it down and it gets under the content below! z-index doesnt help. I even tried transform: translate(0,0,0) - which was a solution on many questions, b...
Patrickkx
1

votes
2

answer
2.6k

Views

Elements position relative to text input

I have the following challenge. When an user is typing somehting in an input field, I want to show a reset button with a position center right of the input. I am not able to change the html structure of the label, input, button and the error message. And I dont want to use browsers support. Does som...
NiZa
1

votes
2

answer
563

Views

The break-inside CSS property is not able to handle box-shadow

I was trying to align some list items into columns using the column property. The columns aligned my elements properly, however the drop shadow attributed with each of those elements are breaking. The upper part of the drop shadow of first element of a column lags behind in the previous column. Plea...
chetan92
0

votes
0

answer
23

Views

CSS | Background style - fixed not working in mobile

Site: http://www.procolorchile.cl/ I neet to put every image fixed (after the 1st). This is the class but nothing is working .fullfondo { height: 100vh; background-repeat: no-repeat; background-attachment: fixed; background-position: center; }
Jorge Roa
1

votes
3

answer
68

Views

Animate div positioning rearrangement

I am building a simple push-down effect which affects the position of two containers. So far I have managed to achieve a near-desired effect using fixed positioning for the hidden container while changing its position to a relative for the opened state. I want to apply a smooth transition to the blu...
snkv
1

votes
2

answer
2k

Views

Use calc() in transform:rotate()

How to use calc() to determine the angle value for transform:rotate()? The !mdn docs for the CSS calc() function states: The calc() CSS function can be used anywhere a , , , , , or is required. With calc(), you can perform calculations to determine CSS property values. However, using calc() to crea...
Brian Zelip
1

votes
1

answer
165

Views

Transition with Textarea's resize conflict

When I apply transition to textarea, it's by default affect the resize function of it. I want to disable transition only on the resize action of textarea, but not the textarea it self - is this even possible to do? .txtarea { transition: 3s; resize: vertical; height: 140px; max-height: 350px; min-he...
sorvz
0

votes
4

answer
40

Views

How can i fix this css code ? and how & ~ works?

i have this css code . it is part of navigation drawer for website. i got from this website: https://codepen.io/cassiocardoso/pen/fjqLp but this code is not working and i checked it with css validator , it has error. And i dont understand how & ~ works! can anyone help me what is its error and how c...
Saeid
1

votes
2

answer
1.1k

Views

Flexbox: div ignore height property

I'm building a modal with flexbox, that has a two row design: |-------------------| | A | |-------------------| | | | B | | | | | |-------------------| Since both A and B are part of a modal with height express in...
ste
1

votes
2

answer
459

Views

Position fixed don't work when scrolling parent div

I have a button fixed inside of outer div. The problem is when I set position: fixed(to keep the button stay while the page is scrolling) it didn't work properly. The button still scrolled and moved out of the screen. here is my code .rotate { transform: rotate(30deg); background: blue; width: 3...
DinhNgocHien
11

votes
3

answer
355

Views

Stacking circles produces a black bar on border radius

I have quite the puzzling enterprise here. I'm building a mouse which serves as a 'torch / searchlight'. All text (inline elements, buttons, you get the point) gets inverted from the usual white to black if there is a hover happening on it, the normal background is a yellow-ish vibe. I currently hav...
Roberrrt
0

votes
1

answer
16

Views

Position: sticky not working once published on mobile

I am trying to make my navigation bar scroll with the website so it is visible at all times. When testing this locally, it works perfectly for mobile and desktop. However, when I published this code live on my website the nav bar doesn't follow the scroll (only on mobile). I thought I was missing th...
user10929924
0

votes
1

answer
11

Views

CSS3/HTML5 changing the border

I am curious if it is possible to move the top border and lower border automatically closer to the text? Is that possible or is this it?
alisha11287
1

votes
2

answer
241

Views

Changing Form Field Opacity in Bootstrap

I've tried a few different things and I can't seem to figure out how to change the opacity of the placeholder without the opacity for the text input to be included. Here is the code: Company/Organization I want to make the opacity of the placeholder to be 0.5 but make the text input to be normal op...
Semir314
0

votes
0

answer
2

Views

media query failing due to incorrect window size interpretation by webpage

I am creating a responsive web page, intended to be displayed on different screen sizes. I have included a @media (min-width: 768px), but it seems that my page is somehow not able to correctly interpret window/screen size. I tried testing my webpage in Chrome, where enabling debug mode i can see the...
kaushal singh
-2

votes
0

answer
17

Views

Css Grid: Center align different number of items in 2 rows

I have to place 7 divs (images) in two rows, 3 in 1st row and 4 in 2nd row. Top 3 divs should be centered and bottom 4 can take all space. Here is what I did .content { display: grid; grid-gap: 10px; grid-template-columns: 1fr repeat(3, 170px) 1fr; grid-template-areas: ". item1 item2 item3 ."...
Zohaib Ijaz

View additional questions