Questions tagged [css3]

32003 questions
1

votes
1

answer
331

Views

Setting print margin content via @page css isn't working

I'm trying to change what shows up in the margins when I print out a page from my website. I've read here that it should be possible to set the content of 'page-margin boxes' like so: @page { @top-center { content: 'Page ' counter(page); } } ...But no matter what I try, this style seems to be comple...
FreakinOutMan
25

votes
2

answer
9.3k

Views

CSS3 ::selection behaves differently in FF & Chrome

I'm experimenting with the ::selection pseudo-element in CSS3. In Firefox it works and looks great. My site has a dark navy blue background. I set the selection so that it looks like this in FF. But in chrome the same test looks like this. It seems that chrome interprets the selection as semi transp...
madcapnmckay
1

votes
1

answer
43

Views

Is it possible to apply a different horizontal color gradients to each line of text using CSS

There are several examples of applying a horizontal color gradient to a body of text. However, the technique used in each of these examples is to make the background have a gradient, and then make the text clear, and then the text will have the gradient. Examples include Is it possible to set hor...
Patrick J Fitzgerald
1

votes
0

answer
74

Views

CSS transition does not trigger on adding class on click

Does anyone have any idea why my css transitions won't work inside an event listener? If I call it directly it works. when I call it inside an event listener it does not work let start_session = ()=>{ let pomodoro = set_up() let _pomodoro_container = pomodoro_container() let _session_ui = session...
DancesOnTheMoon
1

votes
2

answer
192

Views

How to add to the content of a div without deleting it's original content using javascript

I was making a quiz site and when I came to the point when I was making a button to show you the correct answer of your mistake I used document.getElementById but it always erased the rest of the answers that was written by the same method. here is a snippet of my javascript code if (mistakes >...
abdullah ahmed
1

votes
0

answer
54

Views

Applying two separate pure CSS3 animations on a button element

I need to run two CSS3 animations on a button element (ideally in pure CSS, semi-ideally in cross-browser, vanilla JS) for a web mobile application of mine. The first is a bulge-out-and-in animation; it's to play when the button element loads. The second is a spinning animation applied on the butt...
Hassan Baig
1

votes
2

answer
38

Views

float left image doesn't come in center [responsive design]

All I need is the image to be in the left for desktop users and in the center for mobile users. Please Help!!! #name { text-align: center; font-family: cursive; color: orange; text-decoration: underline; text-decoration-style: double; } img { float: left; width: 75%; margin: 0 auto; } #i...
Jatin Gharat
1

votes
1

answer
1.3k

Views

Ionic fixed content at the bottom

I have created a login form for my app with ionic 3, when I toggle the keyboard the content at the bottom moves to the top part. This is my design for the screen when keyboard is not toggled. When the keyboard is toggled. My html mockup Forgot password Sign In Facebook New Here? Sign Up CSS for the...
Gerald Brigen
1

votes
1

answer
81

Views

Children do not take the height of parent in IE (Flex model)

Hi I have a parent div main-section and two children div leftContent and rightContent that are placed next to each other. I want the height of the children to be the same as the parent. Also, I want the main-section to take all the vertical space in the page in case the content in the main-section i...
Archit Arora
1

votes
0

answer
54

Views

Video Calling application UI

We want to develop one of our video calling application UI as below. The main person which user clicks will stay on the main div and remaining participants should stay on left and right side. So, far we have the like occupying all the space that parent has.Current sample fiddle .code-snippet-demo-pa...
Srinivas M
1

votes
0

answer
196

Views

How to make bootstrap thumbnail caurosel responsive?

Hello i am trying to make a slider using bootstrap(thumbnail slider) and it is sliding but i want to slide one by one column (like first column: 1-2-3, second: 2-3-4, third: 3-4-1 and so on) but don't know where i am misleading, please help me out to make it. hints: in initial it will show column: 1...
Abhishek Rawal
1

votes
0

answer
69

Views

How to get a responsive element to snap to a grid?

I have a responsive grid of items, as below. What I want to happen is that when the container changes size (based upon screen width), you don't see part of an empty cell. This can be done by either causing a parent container to not grow past the end of the last item in the row, by causing the parent...
Jamie Barker
1

votes
0

answer
90

Views

column-count and Angular Material: button is not clickable in Chrome

I'm using Angular v5.1.3 + Angular Material v5.0.3 for a website. I have a problem with a button not being clickable in Chrome(v63.0.3239.84), while it works fine in Firefox(v57.0.3). Here is a demo. The buttons Test 1, and Test 2 should be clickable. The way I see it is as follow: when using nested...
Moi
1

votes
1

answer
38

Views

How to add inline CSS styles to an element for which the source of the CSS is a file (and not inline text) that you can't feasibly edit?

I have an html page (index.html) and css page (styles.css) with various elements (including a table) and styles: index.html: ... ... ...
Joshua Mitchell
1

votes
0

answer
334

Views

exotic font size calculation using css3 calc

I would like to dynamically change font size between width 1300px and 1880px. However, the space that I have available only changes in 1 dimension. 1300px: |--|------------------------|--| | container: 1170px | 1880px: |------|------------------------|------| | container: 1170px | HTML: As...
D. Dan
1

votes
1

answer
211

Views

Uneven grid layout without using JS

I would like to create something like this without js: With the added catch that when the screen size is below a certain size, then element B slots in between A and C. I tried doing it using css grid (which kind of works) but then realized the columns and rows are fixed. Meaning A would take as muc...
strangeQuirks
1

votes
1

answer
25

Views

How to use toggleClass with the same classed divs but without affecting the other ones

I am currently looking for a solution which aims at creating several of these boxes with this hover effect. The easiest solution would be to duplicate the code each time and change the id. Now I am looking for a better and more lean solution to achieve several duplications of the example shown in t...
Jakob
1

votes
1

answer
322

Views

Custom CSS attributes for Angular components

I have an Angular component that encapsulates a picture carousel. If uses the :host selector to make itself a flexbox and ngFor to repeat an img tag for each picture in an array of pictures passed in to it through an @Input property. I have two, related problems. 1) I want to allow the pictures t...
Richard Payne
1

votes
1

answer
1.3k

Views

owl-carousel custom dots without changing owl-theme default CSS

I'm working with owl-carousel and I want to customize the navigation.I don't want to change default owl-theme.css .because for some other sections I want this default functionality also.If I customise default owl-theme.css. I get the output but it conflicts with all sections. So far I tried to like...
Husna
1

votes
0

answer
89

Views

Cross-browser box shadow on tbody elements

Is there a cross-browser way of adding a CSS box-shadow to multiple tbody elements in an HTML table? Directly adding tbody {box-shadow: ...} does not work in Internet Explorer and Safari. Pseudoelements act differently across browsers, too, when attached to tbody elements. A few notes: The table lay...
user9027325
1

votes
1

answer
60

Views

CSS and smartphone - Outline when click on a div using a smartphone [closed]

I have a div with onclick that opens the menu on my website, like: When I tap on it using a smartphone, the entire div quickly gets an outline/tag/mask over it. How can I make this outline not appear, when I tap on the div nothing changes visually in the div, just execute onclick? outline:0 or outl...
Arvy
1

votes
2

answer
62

Views

Repositioned button text not clickable

I've created a button that looks like a document with a label below it by moving the button's text outside of its self with position absolute: $('.item-title').hover(function() { $(this).parent().addClass('hover'); }, function() { $(this).parent().removeClass('hover'); }); $('.item-title').on('...
Nidonocu
1

votes
1

answer
453

Views

Can't vertically center content with Flexbox on IE11

So, i'm triyng´to vertically center 2 divs with flexbox, it centers on all major browsers but it doesn't center properly on IE11. Searching about this i found that there's a problem centering divs with min-height, but i'm not using it, so i don't know what is wrong or missing. JSFiddle .container {...
Gabriel Souza
1

votes
0

answer
14

Views

Transitions on popover that's injected to DOM

I have some hard time using https://github.com/euvl/vue-js-popover library. I would love to add some transition for the bottom popover but I cannot even find a place that it's using css classes responsible for transitions. Does anyone use it or know how to do transitions for such solution? It's ha...
susanoo
1

votes
0

answer
1k

Views

CSS Grid powered table with scrollable tbody and auto-width on columns

I read other posts on SO about the matter but before you all start yelling at me just use tables for tabular data! let me say that this is an attempt to solve specific problems: having a scrollable tbody: mandatory for big data and virtual scrolling have the thead columns and tbody columns auto-adj...
Damiano Barbati
1

votes
1

answer
67

Views

Creating responsive flexbox layout containing images in a certain pattern

I am trying to create a responsive layout containing images using flexbox. I have achieved the pattern that I want to but it is not responsive. Following is the pattern: https://jsfiddle.net/wcep5tuk/16/embedded/result/ Even though the pattern looks okay, upon resizing the window, everything falls a...
John Smith
1

votes
2

answer
313

Views

Scrollable content in a mixed of table and flexbox layout

Please see this jsfiddle. I would like to have the table's 1st column respect its 90% width and have the user scroll left/right through items 1 to 3. The with 'more' should always be displayed and not be part of the scroll. In other words, I want to make the table's cell scroll. How can I make th...
Jeff Matthews
1

votes
2

answer
44

Views

Div with background of 100% scale of image and hoverable button over it with 100% area of div and centered text

I have a complicated case. But probably not complicated for you. I have module called catsocial which will contain four social media images with specific dimensions (300x400) in one row which should be 100% of website width. Each 25%, so 4 DIVs will be 100%. Each of these 'images' was placed in modu...
Krupers
1

votes
1

answer
102

Views

right to left 2 columns paragraph

I am trying to use the column-count CSS property, it's working fine but what I want is to make it show the content from right to left. I want the starting column 'Column One' to be on the right. How?
robin geagea
1

votes
1

answer
251

Views

-webkit-overflow-scrolling: touch; border-radius will be ignored when set background in child element

There is a strange phenomenon on safari: border-radius of parent element doesn't work when child element has a background. Everything is OK when remove -webkit-overflow-scrolling: touch;. What happen when set -webkit-overflow-scrolling: touch; in safari ? How can I keep -webkit-overflow-scrolling:...
chenluyan
1

votes
0

answer
188

Views

Box-Shadow cut off in Safari

I'm having issues with box-shadows being cut off in Safari, but fine in Chrome. I've tried 'overflow: visible', but that isn't working. See link below. li { background: #f7f7f7; width: 400px; height: 200px; display: flex; justify-content: center; align-items: center; } button { background:...
Steve Lamb
1

votes
0

answer
112

Views

Family Tree make center and responsive

Hello everyone I need your help to center screen and responsive this family tree. Please see the link below. Thank you. My Code Is As Follow /*Now the CSS*/ * {margin: 0; padding: 0;} .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-tr...
Octeza Jonathan H
1

votes
2

answer
32

Views

Special arrangement of columns in Desktop and re-order columns in Mobile responsive using Bootstrap 4

Can anyone please help me solved below scenario using Bootstrap 4 alpha version? I have different layout for Desktop and Mobile. For Desktop, layout is looking like, ............................................. . ------------- ------------- ------------- . . . 1 . . 2 . . 3...
Bheda91
1

votes
1

answer
271

Views

Media query width 100% not working

Here is a link to the codepen for the code that I am working on. I am trying to get it so that if the device width is less than 540px, the width of the wrapper goes from 33.33% to 100%, however it doesn't seem to be doing so. My media query is as follows: @media only screen and (max-width: 540px) {...
Spencer Ryan
1

votes
1

answer
22

Views

How to underline the menu items with a custom glyph

I managed to add a custom glyph under the currently selected menu item on my website. But I don't know how to center the glyph... The first one is centered, but when we hover over the other menu items, they have varying lengths and the centering is lost... It is purely css, based on the 'a::after' p...
Ben Viatte
1

votes
2

answer
940

Views

Overlapping an icon on React Native

I'd like to have an element overlapping onto an image in react native. I'm new in react native but could do this in CSS in 3 lines of code: container in position relative. element in position absolute + bottom: 20px. Here is my react native code and a screenshot of what it looks like. console.log('t...
user2929613
1

votes
0

answer
61

Views

css before element disappearing only in chrome

Do someone know why, in Chrome, I can't see this before elements and in Firefox everything is fine ? I don't know what other information should I add here to make it more understandable. div.control-2 { position: absolute; margin-top: 70px; margin-left: 146px; } div.control-2:before { positi...
Andnever Will
1

votes
2

answer
25

Views

Cant make two divs next to each one with display flex

I have div .bigwrapper around everything .indexfilters around filters (filters are actually pink rectangle) .blockblockwrapper around videos problem is that when i add display:flex to .bigwrapper then .indexfilters disappear and i dont know where and why. U can take a look at website if it helps htt...
1

votes
2

answer
252

Views

How do I make text appear on top of background image?

I have used this approach https://stackoverflow.com/a/22211990 Only problem is that as soon as I enter text/content in div like this: abc That text appear under the image. Code: https://codepen.io/labeeb/pen/JMxzQY * { padding: 0px; margin: 0px; } .image { background: url('https://i.pinimg.com...
user8734140
1

votes
1

answer
230

Views

Complex shapes using clip-path

I am working on clip-path, But this thing seems not very easy to me. Actually I need to test a custom shapes using clip-path. I have attached the image below of what I Want. I have done this so far, But this doesn't seems near to what I want. Any idea how can I achieve the exact shape using polygon...
Bilal Zafar

View additional questions