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
2 votes
1 answer
8k views

How do I make the hero image resize on width correctly?

Website noob here, please go easy on me. I am currently developing a responsive website for a video game I voluntarily work for. For the most part the website is now very responsive, however I just ...
CoffeetipM8's user avatar
1 vote
1 answer
1k views

Adding tooltip to disabled Dropdown.Toggle

If Dropdown.Toggle is not disabled tooltip works. When Dropdown.Toggle has the class .disabled {      pointer-events: none; }. Tooltip does not work. I'm using the library: react-bootstrap andreact-...
Programmer's user avatar
-5 votes
2 answers
67 views

I'm working on a search bar but I'm wanting to add a preset url to it [closed]

Im wanting a search bar with a preset url an example of how i want this is for my url to be something like preset with youtube.com/ and after the / in my search bar a user will enter something per say ...
KenJiTakana's user avatar
2 votes
1 answer
5k views

How to compile feather-icons into a css file?

I bought a html/css theme and it uses this package: https://github.com/feathericons/feather When I run npm install feather-icons --save-dev I get this installed under node_modules: inside icons/ ...
lewis4u's user avatar
  • 14.7k
1 vote
1 answer
875 views

How to resize a materialize css datepicker to fit inside a card?

I am writing a login page in html using materialize css framework. So i created a card and put Login/register as tabs within the card. One of the forms includes a datepicker from materialize, but the ...
Kishan k's user avatar
0 votes
0 answers
55 views

Unable to center and right align bootstrap 4

I want to center the 2 rows (temperature and relative humidity) and at same time, they have to be aligned right to each other. However I am not able to achieve that. I tried different combo including ...
Parthiban Rajendran's user avatar
-2 votes
2 answers
1k views

Image leave space on left side when background size is cover

My image is leaving space on the left side of the container instead of covering 100% on both the left and right side. background-image: url("https://images.unsplash.com/photo-1491336238524-...
Divi Singh's user avatar
0 votes
0 answers
157 views

css file name disappear after webpack bundle

I use React with self-setting webpack in general, we use chrome development tool to see css(or sass) in element, and we can also see css file name, but, in my case, I cannot see css file name in ...
WreewanMorhee's user avatar
0 votes
1 answer
128 views

CSS - Grid Causing Overflow [duplicate]

I'm trying to make a 2-column website using the CSS grid functionality. I'm also trying to make it mobile friendly. What I have works, but it's causing an overflow on small devices: <style>...
Appel Flap's user avatar
0 votes
3 answers
71 views

I am trying to align text and image horizontally for my website [duplicate]

As the title suggests, I am trying to align the following image and text side by side and I can't seem to figure out how to do this. Here is the relevant HTML: <div class="projects"> ...
An Ignorant Wanderer's user avatar
1 vote
1 answer
816 views

How can I increase the size for changing navbar into a hamburger icon

I have a very full navbar. When i draw the window smaller, the navbar first goes into two lines, before the hamburger icon comes. Also on my android phone i have my navbar in 3 lines, instead in a ...
josef hartl's user avatar
3 votes
2 answers
3k views

How change hue of image with different colors with css filter to hue of blue

I have image with different colors. In adobe photoshop my image filtered with smart filter which add hue, saturation, brightness to image. So I need to change all colors on image to hue of blue. But ...
Vsevolod Fedorov's user avatar
0 votes
0 answers
637 views

How to make the header take up the full width in a media query?

I wrote the media queries for smaller screens ,but i can not seem to make them work for ipads. I have a problem with the width of the header and the navbar. They don't seem to take up the full width ...
Sarah Barlow's user avatar
-2 votes
3 answers
1k views

How to place Component to the right of another Component

I learn som React and go through this tutorial and I read for hours and dont understand if I wanted the Home, Contact and About Component in the tutorial to be place horizontal instead of vertical ...
jurge bent's user avatar
-2 votes
1 answer
415 views

How to make padding to not affect width, height and size

I want to padding work like absolute positioning. So It wont hurt other things. I'm using Hover.css by IanLunn. I want the line animation to be under the List item. Because of that I'm using padding ...
Arshia Arsh1a Faraji's user avatar
-1 votes
3 answers
62 views

Aligning content size of header and main

There are sites like https://tagesschau.de and https://www.atlassian.com/ where the header background spans the complete page width, but the content of the header is only as wide as the content of the ...
me.at.coding's user avatar
  • 16.3k
1 vote
3 answers
1k views

Only with CSS, looping 30 images one after another for infinite time creating a burning fire effect

sorry if this question repeats another one , but i did not find result for only CSS usage for creating this effect . I have 30 images , with which i need to create a burning effect ( hence they need ...
Jefry90's user avatar
  • 89
0 votes
4 answers
207 views

Center button between two images, vertically in percent

I'm trying to achieve this behavior: images are img-fluid, cause they need to scale across Bootstrap breakpoints the layout must always be like the mockup, both when images are small or large (button ...
Sergio's user avatar
  • 2,078
1 vote
2 answers
651 views

How to generate a new table row with an onClick event

I have a table with 2 columns and 1 row. I would like it to generate another row with a clean set of inputs when users click the "add new row" button it. Current HTML table: <table class="table ...
Robert's user avatar
  • 229
-1 votes
4 answers
6k views

Making script in html run automatically?

I am new to HTML and javascript. I have below code with me which runs progress bar on clicking button. Can anybody help me below points :- 1) Making it independent of button. It should start executing ...
Paras Ghai's user avatar
1 vote
1 answer
148 views

XSLT: How to test css styles?

I have XSL file that transform an input xml files by particular convention. Among other things, during the conversion, I add CSS styles to some of the HTML tags [implemented in an external CSS file.] ...
C. Mar's user avatar
  • 139
0 votes
1 answer
1k views

Nativescript how to overflow text?

I'm using Nativescript with Vue.js and trying to overflow text. My text is in Span inside of TextField inside of GridLayout with 450 width and height. I want when the text length becomes larger than ...
stanimirsp's user avatar
  • 2,806
11 votes
2 answers
968 views

Recalculate scrolling div position when used in a clipping path

I am using clipping paths to change my logo colour base on the background colour. In addition to this the logo scrolls from top to bottom based on the users vertical position on the page. Top of page ...
Mr Toad's user avatar
  • 236
5 votes
3 answers
308 views

Third element ends up in new line in Safari

I have a simple Bootstrap layout: <div class="row"> <div class="footer_column col-md-4"> <div class="footer_item"> ABOUT </div> <div ...
sveti petar's user avatar
1 vote
1 answer
73 views

Bootstrap dropdown menu is hidden when page is responsive

I have a custom navbar.css to color the navbar in red, everything seems working except that when I scale the size of the browser (or when I try the responsiveness of the website), the dropdown menu of ...
Simone C.'s user avatar
  • 369
0 votes
2 answers
68 views

I'm trying to make the inner text change on hover colour white

I'm having trouble to make the inner text change on hover colour white. I am using::before: hover.. when I hover entire div could be changed but still text is black Why is my code not working? ...
Abid's user avatar
  • 117
1 vote
2 answers
8k views

How to have responsive gaps in grid layout

I'm trying to create a responsive grid layout with responsive, colored gaps, where the gap size is proportionate to the width of the parent container. The problem is that the vertical gap does not ...
Arie's user avatar
  • 103
0 votes
0 answers
68 views

how to wrap items different heights [duplicate]

I have a web page that contains several components with different heights (based on their own contents) and I need to make a responsive display from left to right, up to down like this: preview // ...
dapidmini's user avatar
  • 1,548
0 votes
1 answer
423 views

Bootstrap 4 card images don't align

So I createad a non-bootstrap class, called services.Inside it there are 3 bootstrap 4 cards with the same resolution(225x225 px).I then assign the style of it as display: flex so they are aligned ...
StorMy's user avatar
  • 147
0 votes
2 answers
53 views

Drawing a border between items, whether they fit side-by-side or wrap onto a new line

I have two inline blocks, A and B, both of variable dimensions: <container style="display: flex; flex-wrap: wrap"> <div>Arbitrary content A</div> <div>Arbitrary ...
Chris Morgan's user avatar
  • 88.7k
0 votes
1 answer
73 views

CSS alignment and margin issues

I am trying to make a top nav bar. However, I can't seem to fix some minor issues with my CSS. Issues: There is a margin at the top of the button (some extra blue before the black). How do I get rid ...
Anters Bear's user avatar
  • 1,876
-1 votes
1 answer
82 views

How do I put this results on the same row

Results of each soccer game are given in an array, and now i want to do a standings table out of it, so i started to sort out the results and add them to the particular team, in this case i want to ...
WUdhawudhs's user avatar
0 votes
1 answer
191 views

Wordpress keeps adding <a> tags

So while I am working with Wordpress and the OceanWp Theme (in the HTML Editor), everytime I am adding a tag anywhere in my Code, Wordpress keeps adding tags over and over again to my HTML Code. The ...
kevin's user avatar
  • 71
0 votes
1 answer
123 views

Cant close dropdown menu on mobile devices

I want the menu to be closed when you click on an item in dropdown menu. At this moment, the menu closes only when the you click on the menu button. Link to website >>> http://www.glassmania.pl/PROA5/...
MM86's user avatar
  • 1
-1 votes
1 answer
24 views

how to get the following font to look right

I have the following fonts and there are some gaps between certain words. I guess I could play around with the fonts and width but just would like to know if is it usually the fonts or the width that ...
piano0011's user avatar
0 votes
1 answer
1k views

How to preserve hidden elements space to prevent resizing the component each time it's displayed/hidden

I'm using react to hide elements by using the one line if statement inside render() method as usual, the problem is that when these hidden elements shown the size of the component changes. an ...
zbeedatm's user avatar
  • 615
0 votes
0 answers
99 views

How to show the previous and next image in the previous and next button in a carousel

I am making a portfolio website, with a carousel to showcase my images. I have successfully coded the carousel to work. Now, I just have one obstacle: I want the 'Next' and 'Prev' button to show the ...
August1997's user avatar
0 votes
0 answers
172 views

mouse movement lag in javascript and jquery

I am moving an image of the bat according to the position of the mouse,i want to limit its boundary. when i include the if condition the webpage becomes laggy. any solutions? //my js code is below ...
simeon irudhayaraj's user avatar
4 votes
3 answers
3k views

How to design non fill rounded checkbox using pure css

I am making a styled rounded checkbox for woocommerce . The Problem is my checkbox is now fill inside . How Can I make it thin inside without filling? input#createaccount:checked { background-...
Firefog's user avatar
  • 3,154
2 votes
1 answer
344 views

Set appropriate color of element base on linear-gradient background when scrolling

I need some help on a math/algorithm problem. (You don't need to know react-native in order to solve it; just some math) I have a react-native app having a linear-gradient background from rgb(24, ...
user47103's user avatar
  • 179
0 votes
1 answer
336 views

SVG works fine on firefox but the its positioning changes on other browsers

I have included a SVG for polygon and made necessary positioning.It works fine on firefox but the positioning changes on other browsers.I have attached the screenshots in both firefox and Chrome ...
samana ghimire's user avatar
2 votes
2 answers
3k views

Add progress bar to HTML table? [closed]

I Want to add a column of progress bar to each row of html table to show processing of each file. I want to have with animation like first file goes from 0% to 100% then row 2 or second file starts ...
Paras Ghai's user avatar
0 votes
1 answer
526 views

Materialize css triggers are not working in Vue js

I'm using Carousel element of Materialize CSS in my Vue js project. When I route to the vue instance which has carousel element, it doesn't show the carousel element. When I refresh the page, it shows ...
Binod Karunanayake's user avatar
0 votes
1 answer
476 views

'disable' does not prevent 'onpointerup' event. Is there an 'onclick' equivalent using Pointer Events?

Using the 'disabled' css property does not prevent 'onpointerup' events from being handled by the associated function. What is the best way to achieve 'onclick' functionality (specifically that event ...
oclyke's user avatar
  • 361
2 votes
1 answer
1k views

Bootstrap-4 modal not showing when triggered from inside a dropdown

I used a dropdown and one of the dropdown items should open a modal. But it is not showing. Modal works fine when I access it with a normal button instead of a dropdown button. I think it is opening ...
BLIND's user avatar
  • 61
1 vote
2 answers
49 views

text can't be left aligned

I want my whole section to be left aligned. This is my #CSS code: #Gender{text-align:left;} <label id="Gender"> Your Gender: <br> <label for="male"> <input id="male" ...
Weilin Hong's user avatar
0 votes
2 answers
540 views

How to set underline on hover on navigation links on responsive menu?

I have coded for underline on hover on the navigation menu, which works well. But when I create a responsive navigation menu, the underline on hover covers the entire width of the block rather than ...
IvanS's user avatar
  • 41
-1 votes
1 answer
149 views

How to center text in middle of text color [duplicate]

I'm trying to put text in the middle of a colored box. When I try to center the text, it centers it but the text is still toward the top of the box and not in the middle. How do I move it down so it's ...
ABA's user avatar
  • 1
0 votes
1 answer
2k views

Styling a button from a separate css file

i'd like to style buttons in some html code that is linked to a css file. The style for the buttons is in the css file. Everything else works, but when I try to get the styled button, it turns into a ...
GuardianAngel02's user avatar
0 votes
0 answers
43 views

how to get the following css to work in tablet portrait

I am trying to get my css to work in a tablet portrait and when testing it on my tablet, I can't get any of my changes to work. Am I suppose to do a hard reset on the tablet or something? /*...
piano0011's user avatar