Questions tagged [css]

CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (HyperText Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.

css
Filter by
Sorted by
Tagged with
0 votes
2 answers
70 views

How to auto center images evenly?

I am trying to make the images center on the page and have evenly spaces. When I minimize the page for a mobile view, the images go to the left and there is a huge white space on the right side. ...
Venomous's user avatar
0 votes
1 answer
6k views

Bootstrap 4 Grid mosaic

I had built a small mosaic with Bootstrap 3 as follows : Working mosaic. I now have a site under bootstrap 4 and when I want to reuse my mosaic I get this: Broken mosaic. Here is my html <div ...
weevood's user avatar
  • 21
0 votes
1 answer
238 views

css3 scrolling instead without a page reload

I follow this example https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior But it does not work, page is reloaded. I need only to scroll, instead of reload. Actually i would like to ...
olga's user avatar
  • 969
0 votes
2 answers
928 views

Remove body padding for fixed navbar

I am using Bootstrap 2. Excited to upgrade to 4 eventually. For now I have a site with a fixed top navbar. Looks great. Now, I am working on some new pages pages. I will need the top navbar to NOT ...
slindsey3000's user avatar
  • 4,163
0 votes
2 answers
4k views

Make popup div responsive on mobile devices

I am trying to make my pop up div to be responsive on a mobile device. It works perfectly fine on the website but on my mobile device you can't exit the popup and it is too large. Im assuming that I ...
chris2656's user avatar
2 votes
0 answers
58 views

Fixed div jumps on smartphones

This problem occurs only on smartphones. I'm testing with an iPhone 6 right now. As soon as I scroll down, the top address bar of the browser disappears - therefore the black SVG jumps that is ...
Daniel's user avatar
  • 21
0 votes
1 answer
4k views

Wordpress - Google fonts not working / importing correctly

I'm quite new to Wordpress and I'm importing my stylesheets across using the html5blank theme. I've noticed the google fonts aren't applying in the wordpress site. I have this link in my header.php ...
Mike.Whitehead's user avatar
1 vote
1 answer
177 views

Overlapping CSS issue on Wordpress site

I am working on a popup functionality for a website. I have the site linked below. When each press item is clicked on, a popup box appears to confirm that the viewer is about to leave the site. The ...
Chelsea's user avatar
  • 73
4 votes
1 answer
6k views

How do I style the confirmation buttons within primeng's ConfirmDialog modal?

I'm confused on how to go about styling the 2 'confirm' and 'cancel' buttons within Angular's primeng library when using the ConfirmDialog. ref: https://www.primefaces.org/primeng/#/confirmdialog I'...
Roger Sterling's user avatar
0 votes
2 answers
229 views

Increase padding between form boxes

I am trying to increase the space between my input boxes by 48px. This seems like a simple fix; however I have not been able to get the input boxes to move. If someone could help me with this I ...
Missy Bur's user avatar
  • 211
1 vote
1 answer
120 views

Twitter like counter

Library/Framework used = Jquery+Bootstrap 4 I want to make a twitter like counter, but with two input fields, if the 2 input are valid, then post. This is my code so far. $('.new_post_title')....
fsn fusion's user avatar
1 vote
3 answers
901 views

Load each progress bar from 0 to its value in multiple progress bar animation

I am trying to add animation in grouped progress bar that will load each progress bar from 0 to its value. e.g in my sample code below I want to first load red progress bar then load the green ...
User7354632781's user avatar
-1 votes
5 answers
731 views

How to make an image hyperlink in <h2> tag where <h2> consist of text and image?

There is an <h2> tag which consist of text as well as image. I want to make the image as a hyper link without including the text. <h2>Sample text<img src="test.png"></h2> I ...
Praveen P Moolekandathil's user avatar
-1 votes
1 answer
782 views

Bootstrap 4 - row destryoing layout - Why row-fluid needing? Diifference between row and row-fluid

body { font-family: 'Ubuntu', sans-serif; background-color: #0d0d0d !important; } body a { color: #fff; } body a:hover { color: #fff; } @media (min-width: 1500px) { .container{ ...
Krystian Polska's user avatar
0 votes
3 answers
868 views

Attach event on pseudo-element

I'm trying to attach a click element only on the :after pseudo-element on the following fiddle: <div class="tag deletable", style="style")> Tagname </div> .tag { display: inline-...
felipeecst's user avatar
  • 1,405
-2 votes
1 answer
1k views

Bootstrap 3: Why nesting inputs inside labels?

I'm about to style some checkboxes for Bootstrap 3, and I absolutely cannot get my head around why in their examples they use this markup: <label> <input type="checkbox"> Check me out &...
Ti Hausmann's user avatar
-1 votes
2 answers
73 views

Vertical Scrollbar using CSS Jquery

I am trying to create a vertical scrollbar as shown in this site. Can someone please guide me on how this can be done? Any sample code would be helpful. Thanks in Advance.
Chris's user avatar
  • 7
0 votes
1 answer
142 views

how can i repeat the background image of chain link fence

Trying to repeat this chain link fence down along the sides with a repeat-y, and I have another image also repeating just fine here... what am I doing wrong that this wont repeat? WEBSITE http://...
DA-G-GURU's user avatar
  • 141
0 votes
0 answers
50 views

Using :valid in CSS

Is using :valid in CSS necessary to include in a stylesheet or will the web browsers already know that something is valid? I've already written something like this input[type=text], input[type=email]...
jessicalam's user avatar
0 votes
1 answer
246 views

How to align bootstrap thumbnail

I'm using bootstrap thumbnail. I want to align them 3 thumbnails per row. Please take a look at the picture. This is what I want to happen: (Please Click) As you can see on the image, the thumbnail ...
Ericka Leonardo Gregorio's user avatar
1 vote
0 answers
161 views

Dragging the react bootstrap modals using interactjs is facing a issue while dragging for the first time

Dragging the react bootstrap modals using interactjs is facing a issue while dragging for the first time. I need to use '.modal-dialog' class as the target selector for dragging using interactjs. ...
piu's user avatar
  • 195
-3 votes
4 answers
1k views

Display website JS source code on HTML background with only front-end code

How can I display the current front-end JS source code (1 file) on the HTML as some sort of background? I am currently displaying a static image of my code as the background, but this must be updated ...
frozen's user avatar
  • 2,134
5 votes
3 answers
1k views

SVG filter with CSS transitions

I was doing and svg filter with css animation. I use <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic"...
Sergey Mell's user avatar
  • 7,920
0 votes
1 answer
149 views

How to have a image fade out without another div

I have a page that has lists of products with their images. When I hover on an image, I have the image enlarge slightly, but the max-height does not change. Because of this, I want to have the image ...
Jake P's user avatar
  • 131
0 votes
1 answer
2k views

Padding between two jquery datepicker tables

I need spacing between the two tables inside the jquery date picker which as common header.I tried with various solutions like giving padding to the parent div,but I"m unable to resolve it.Can anyone ...
Hema Nandagopal's user avatar
0 votes
1 answer
2k views

Ionic 3 - approxItemHeight not working in virtualScroll

I have a virtualScroll where I'm specifying approxItemHeight: <ion-list [virtualScroll]="myArray" [approxItemHeight]="'320px'"> <ion-item *virtualItem="let myItem"></ion-item> &...
Royi Bernthal's user avatar
3 votes
2 answers
2k views

AMP page reference for external css

How can I add external css styles in amp page. This tag I am using to include css file. <link href="css/cssnew.css" rel="stylesheet" media="screen"> Its giving the following error: The ...
Deekshith Banjan's user avatar
0 votes
0 answers
61 views

BUG: Chrome Inspector blacks out when using border-radius within Cordova Ionic app

My Cordova app is all working just fine, been using Chrome Inspector to help troubleshoot and debug all the coding. Recently I began cleaning up the UI and started incorporating border-radius in many ...
rolinger's user avatar
  • 2,976
0 votes
1 answer
334 views

navbar goes down in bootstrap when using Play framework

Here is my code for a page: @(title: String)(body: Html) <html> <head> <title>@title</title> <link rel="stylesheet" media="screen" href="@routes....
Yaroslav's user avatar
  • 1,325
0 votes
1 answer
1k views

codeigniter, how to save image in specific directory

i have the code in view/admin_view2.php <?php echo form_open_multipart('home_admin/createBerita'); ?> <div class="form-group" > <label class="control-label">...
Lukman Azhari's user avatar
7 votes
5 answers
48k views

CSS modal overlay with fade in and out?

I would like to have a content overlay, to grey-out the page contents when a modal opens. I would like the overlay to fade in, and fade out. I can: Add and remove classes using JavaScript (React, ...
Stephen Last's user avatar
  • 5,691
1 vote
0 answers
347 views

Materialize CSS and Angular 4 Initialize not working correctly

I have a sidenav and a select-tag from Materialize CSS in my Angular 4 App. They both work when you refresh the page on the page where the sidenav and select-tag are defined. To clarify, I use a ...
fangio's user avatar
  • 1,776
0 votes
1 answer
1k views

absolute positioned image content on list before pseudo element in IE (11)

I'm trying to set an image on a :before pseudo element. It works on all browsers except IE11 of course. Here the positioning doesn't work as expected. <ol> <li> :before li { ...
steros's user avatar
  • 1,856
-1 votes
1 answer
45 views

CSS3 @media Rule behaving odd on mobile

I have this code on my site to hide content when in desktop view: @media only screen and (min-width: 767px), only screen and (min-device-width: 767px) { .hide-desktop { display:none!important; ...
SaturnsEye's user avatar
  • 6,363
2 votes
1 answer
2k views

How to change the font family of jquery datatables export buttons

I have used the datatables export buttons (https://datatables.net/extensions/buttons/examples/html5/simple.html) on my web site. However in my web site I'm using custom font-family. In my main css the ...
dk13's user avatar
  • 1,481
0 votes
1 answer
61 views

Increase width of image to x times of auto width

I want to increase my image width and height to 3 times of what it actually is, but I don't know the dimension of the image. Can I do it using CSS? I tried calc() function but it doesn't accept auto.
Swaroop Deval's user avatar
0 votes
2 answers
67 views

Measuring font-size in pixels

When specifying font-size like this: p { margin:0; font-size:10px; } <p>hello</p> Is it safe to assume that computed height of p will be the vertical distance from the ...
LiranC's user avatar
  • 2,450
0 votes
1 answer
6k views

Responsive charts in angularjs with chart.js

im trying to make a responsive chart js, as the title say. I use a framework from charts.js from here. http://jtblin.github.io/angular-chart.js/ . I'm new on angular so the concepts of the framework ...
Jarlio's user avatar
  • 117
0 votes
1 answer
443 views

UIKit CSS: Insert sticky sidebar between <article>-tags

I would like to solve the following problem: I got something like <article class="uk-article"> <h1 class="uk-article-title">Test</h1> <div class="navi uk-panel uk-panel-box ...
SPQRInc's user avatar
  • 108
0 votes
1 answer
732 views

Bootstrap Modal: make the whole columns clickable

I am testing on this website some modal windows and as you can see now the modals are toggled on click / touch on the play button. My question is: is possible to make the whole columns clickable and ...
Roxana's user avatar
  • 13
2 votes
1 answer
199 views

Style elements on different viewports even when simply resizing?

I'm admittedly not a fan of CSS and I hate even more responsive layouts but I'm creating an UI with Bootstrap (version 4, for what matters) in which I have some absolutely positioned elements that ...
user avatar
0 votes
4 answers
2k views

Bootstrap Navbar Change on Scroll Up or Down

I want the navbar when scrolling up or down replace for a svg file. As you can see i'm using. top to change de navbar, but i need it to change on scroll up and down without making top > 56 like this. ...
fsn fusion's user avatar
0 votes
1 answer
311 views

Margin on the chart in NVD3

Does anyone know how to put a margin at the top of the chart? I don't know if it's possible or a bug. I already tried to modify the .margin({top: x, right: x, bottom: x, left: x}) but this is not the ...
Raphael Sampaio's user avatar
2 votes
1 answer
583 views

Unable to apply Bootstrap or React-Bootstrap styles to app created with create-react-app

As the title says, I followed the installation steps as per the Bootstrap and React-Bootstrap docs after using create-react-app: npm install --save react-bootstrap [email protected] Then ...
VWang's user avatar
  • 193
2 votes
1 answer
56 views

Having 2 HostBindings leading to class based on Inputs (Angular 4)

I have the following code in my component : @Component({ selector: "home", templateUrl: "./home.html" }) export class Home { constructor() {} @HostBinding("class") @Input() public type: ...
Scipion's user avatar
  • 11.7k
0 votes
3 answers
804 views

CSS to change set background of active nav menu page

I have this website of http://camerabeanbags.co.uk/test and on the top Nav Menu you can see when you hover over the text on the menu a grey background shows behind the text. What CSS code can i use ...
Harvey's user avatar
  • 43
0 votes
1 answer
258 views

Transform translate property does not work using calc in internet explorer

I am facing a problem using calc in Internet explorer. I am using transform: translate(calc(-50% + 10px), calc(-50% + 20px)) which does not work in Internet Explorer. I am aware that transform: ...
piu's user avatar
  • 195
1 vote
2 answers
736 views

Table cell corners highlighting - html/css

I have defined two CSS classes that highlights corners of table cells: .right { background-image: linear-gradient(225deg, green, green 5px, transparent 5px, transparent); } .left ...
Stastny Jakub's user avatar
0 votes
1 answer
19 views

Re ordering Bootstrapped rows when changing screen orientation

Presently in a medium screen layout i have the following ============================= | Parent | Child | | data | data | Now when the screen changes for mobile devices i ...
INFOSYS's user avatar
  • 1,555
6 votes
1 answer
14k views

How to scale inline SVG to parent containers width and height automatically?

I am trying to build a wavy box using svg. Something like this: I have drawn it in a vector application and set the size of the document to 500 x 200. Now, I copy the SVG contents into an inline SVG ...
Gasim's user avatar
  • 7,785