Newest 'css' Questions - Stack Overflow

Questions tagged [css]

CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (Hyper Text 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.

-1
votes
0answers
14 views

How to move image right and make text appear when clicking button

I am a newbie in terms of web design. I have centered an image, put a button below it, and when I click this button, some text appears below the image. When I click the button again, the text goes up,...
0
votes
0answers
11 views

Can I change content placed anywhere after focus on specific input field using css only? [duplicate]

I am currently editing the chat box. I have the input field after focusing on the same input field change icon to red which is placed below input field. I used after property to place that icon. is it ...
0
votes
1answer
11 views

React: How to include some standard size to box

I have been given some code which I do not fully understand. The project is hosted at: https://konekto.world/ and I am currently working on https://konekto.world/emergency_sent. I want the website to ...
0
votes
0answers
17 views

How can l make custom partical style?

l want to use particles js only some part of page and move that side like this picture which l want I tried to change default configuration in json but I didn't find anything that help me.Different ...
0
votes
2answers
29 views

Flex transition. Fill the space in a smooth way

How to make flex transition smooth. In my example, when I click .center it jumps in an abrupt way. It is even more noticeable when the user clicks on document, .right fadeOut and .center jumps to fill ...
1
vote
0answers
12 views

How to fix 'animation-fill-mode: forwards' in slidein animation?

The menu slides in but after it goes back to left -350px. I want the menu to stay at left: 0px so people can see it I tried using animation-fill-mode: forwards but it doesn't seem to have any effect. ...
0
votes
0answers
15 views

How to animate first element of array instead of lasts by vue (animate.css)

I have an array which has been updated by time, but animate.css always animate last element of array when array change. <template> <div class=""> <div v-for="(device,index) in ...
1
vote
0answers
10 views

`page-break-after: avoid` when break occurs in margin

When printing from Chrome, I would like to avoid a page break between a heading and the following paragraph. I achieved this for most documents with: h1 { page-break-inside: avoid; page-break-...
0
votes
1answer
32 views

Combine linear-gradient with dynamic background-image

I'm trying to achieve color overlay on background images as demonstrated at w3school, but I want to do it for a dynamically set background-image (I'm currently working with VueJS). What I try to ...
0
votes
0answers
12 views

Unable to fit svg to browser print in landscape mode

I am unable to print an svg image to fit in A4 size in landscape mode. The CSS which I am using is: @media print{ @page{ size: landscape; max-height: 100%; max-width: 100%; } svg{ ...
0
votes
3answers
31 views

Image isn't displaying [duplicate]

I have a div property inside a form where I want to display an image. But I can't manage to fix it. I get an HTTP ERROR 404. My solution tree looks like: MyProject --Controllers --img ----Logo.jpg --...
1
vote
2answers
24 views

How to change gauge size jQuery

I create found gauge, and I want to change size, because now it's not nice. I try to change from CSS but it's destroy complitly gauge. My code: $(document).ready(function () { var gaugeObj =...
0
votes
0answers
28 views

Chrome unwanted blurry div border

I have an issue with Chrome webbrowser render: I have two elements side by side, and i have this grey annoy border in the middle: this happens in sertains screens resolutions and only in chrome. I ...
0
votes
2answers
38 views

Using document.querySelector('.').style. to change *two* CSS properties of a div

Trying to set up a truncated textbox that expands to fullsize with a click/tap on the textbox. My div .textbox has height:10em, overflow:hidden, and there's a "there is more..." fade-out effect over ...
-5
votes
1answer
29 views

I need help to design a grid [on hold]

For a landing web site page i want to set the mapping of the following plan. I tried many ways to code it (css grid, bootstrap, flex) but i didn't really find some conclusive things. i'm open for a ...
0
votes
2answers
31 views

jquery find and replace input field is replacing all of my content not just individual paragraphs

I have some paragraphs and an input box. Basically the user types into the field, and when they press "ENTER" it runs the jquery function seen a bit further down. Essentially what happens is, when a ...
0
votes
3answers
59 views

Footer position with no fixed height [duplicate]

I can't place the footer so that it is always at the end of the page. If the page has less content it is not placed at the bottom. The footer has not a fixed heigth. This is my code. <% ArrayList&...
0
votes
0answers
6 views

Adding fonts for Joomla menu from google API

I use Joomla v3.9.8 stable on my website with a template named AS002066 and i want to use some additional fonts provided by the google API. I found some code in a file from my template called 'fonts....
1
vote
0answers
22 views

Leaflet.js transparent water/ocean

I have a LeafletJS map with OpenStreetMap content, I am looking for a way to make the ocean transparent, so you can have a something like this: https://codepen.io/verticalgrain/pen/LVRezx (but then ...
0
votes
2answers
22 views

What is the proper way to target the tab key 'highlight' events on an html element?

I'm trying to understand how to respond to tab key navigation, but am not sure which event is triggered when an element receives focus via the tab key . In the code linked to below, I want all the ...
-2
votes
1answer
14 views

Issue on iOS with HTML-tags/CSS - changing font color

We're working on a WordPress website, made with a theme which uses Elementor. Everything was allright, until we checked our iPad version of the website. When there's a text on the website which has ...
0
votes
1answer
40 views

CSS not accepted (or weird) Chrome vs Firefox

My code works consistently when working in MAMP, but when uploading to our ubuntu server (where all other websites work perfectly cross browser base) the firefox browser shows everything perfectly, ...
-1
votes
2answers
29 views

Bootstrap multilevel dropdowns not automaticly closed

I use bootstrap multilevel dropdowns. It works all fine, but I don't know, how can I show only one child at same time. <div class="container"> <div class="dropdown"> <...
0
votes
0answers
21 views

How to extract CSS to a `critical.css` stylesheet via an `import` statement with Webpack?

Background Our web application follows a component-based design pattern, with each component containing a template, Sass partial, and JavaScript module, like so:- components/action_button/...
0
votes
1answer
22 views

How can i install LESS css on Reactjs App?

I want to install LESS in react app. i have try and find solution to google but not success I'm new in ReactJs also I don't have deep knowledge. i need help someone who guide me to install less i ...
0
votes
1answer
17 views

How to override all classes within in a media query?

I am building a custom .css, but I do not know, how to override a bunch of classes within a media query with "nothing". Means, I do not want this in my output, but also I don't want to delete this ...
0
votes
3answers
58 views

How can I make a div take the full width of the page when it is inside another div that have 90% width

how can I make the child take the full width of the page <div class='container'> <div class='child'> something </div> </div> .container { width: 90%; ...
0
votes
1answer
36 views

My Div is just overlapping another div whereas i am putting it after the first div

I have made 1 header and 2 divs. Out of which one div (The second and the lower div) is just overlapping the other. I need help solving this problem. Here is the code. (It is big so i have ...
0
votes
0answers
16 views

Prevent Google Chrome Mobile app from hiding the Searchbar while Scrolling the page

I Have a Page which contains lorem texts of 1000 words to stimulate page scrolling. When i scroll the page, the searchbar in google chrome mobile hides. i want to prevent it from hiding. Kindly give ...
0
votes
1answer
47 views

Using flexbox on table header <th> elements

I have a scenario which requires a complex layout within table header <th> elements. I want to approach the problem by making the <th> elements a flex container. However, if I start with ...
0
votes
0answers
30 views

Changing borders in DataTable using CSS

I am making use of a datatable, but can not seem to change the borders of my tables in css. It seems that the borders have different thicknesses and I am trying to make them all the same. Here is my ...
0
votes
0answers
18 views

CSS clas generates svg tag. does not work in JSF

A production JAVA EE 8 web application is using the theme Metronic and JSF. currently it runs on Metronic 5.0 . I upgrading the code to use the new version 6.0 the icons in the picture below are ...
0
votes
3answers
33 views

Mixing Multiple conditions in a Single NgStyle Tag?

I have a NgStyle Tag and I want to use multiple conditions in it, but either it doesn't work or I receive errors. So far, this is my code: <div class = "card" [ngStyle]="{'height': Card.duration....
0
votes
3answers
60 views

How can I use CSS to ensure an image does not exceed available browser height?

I am putting together a page using the Bootstrap Freelancer theme (https://startbootstrap.com/themes/freelancer/). I want to ensure the image of the ninja fills the available space, but does not go ...
0
votes
0answers
9 views

How to use Bootstrap 4 media query mixins in Angular 6 components

If I have 20 components, each component has 2-3 child components. Each having their styles in their individual SCSS file, then in that case do i need to include the 3 bootstrap files in each component?...
-1
votes
0answers
23 views

Prevent content shift with position:sticky

I have a sticky element that is initially fully hidden (via display:none). When user scrolls past some breakpoint - the element is displayed. This action causes vertical content shift (because ...
2
votes
3answers
43 views

Bootstrap 4 aligning <a> tag in absolute center of div

I'm totally new to Bootstrap. I'm having serious problems at aligning an <a> tag in the vertical and horizontal middle of a div. I've tried to use .mx-auto, margin: 0 auto and other usual ...
0
votes
2answers
25 views

Media queries not working in specific IE query

I am trying to use media queries in only one browser (IE) but nothing I have tried is working. For example: @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Styles ...
0
votes
0answers
30 views

How can I share specific data from my website to Social Media ports?

I am setting up a website and want to enable the ability to share results of a form. So you understand my question, you enter details into a form and click 'go', the data is then calculated and a ...
-1
votes
2answers
19 views

Setting background color of child element in SASS depending on width of parent element (SASS)

I am new to SASS. Actually, I want to set background of a span inside a class (.someClass) as 'yellow' or 'orange' based on the width of (.someClass div element). I could easily do same in jQuery, but ...
-6
votes
0answers
17 views

Regarding filtering css image&content card views in angular js [on hold]

How to filter cards using angular js in which a card has the following html and css elements a) image (from src) b) text1 c) text2
0
votes
0answers
8 views

Google Sheet in an iframe causes the user's screen to jump to the top of the page when certain elements are clicked

I have embedded a Google Sheet with an iframe on a WordPress site. When I click any of the dropdown selectors on the sheet the parent page jumps to the top of the page so that you have to scroll down ...
0
votes
2answers
46 views

How to make a block of prices for all the same padding

Faced with the problem the block of my prices has different indents everywhere. This is due to the length of the text (product name). How to make a block of prices for all the same markup. How can I ...
0
votes
3answers
55 views

Input type=[number] converts float to int on display

I want to display a value of lets say 100.00 in a number input. This can be user entered and works with currency so it is important that it shows. However when programatically setting the value to ...
0
votes
1answer
24 views

image from sql table not following css

For the images for my website I take them from my sql table. The majority of the images are working and style how they are supposed to. However, the image for my header background is not and I cannot ...
2
votes
1answer
22 views

Dynamic aspect ratio with changing SRC

My problem is that after selecting an initial image file and trying to select another, the aspect ratio does not change in relation to selected image but keeps the aspect ratio of the image selected ...
-1
votes
3answers
28 views

Difficulty in changing color of text when hover over it

I am trying to change the color of the text to white when hover over it, but I am unable to do so. Here is my code that I tried . How can I make sure that color of the text changes to white when ...
3
votes
5answers
50 views

How to apply Style to custom component content in Angular?

I am trying to apply styling to a child of a custom component. Selector: <custom-component-example></custom-component-example> Inside custom-component-example.html: <button> &...
0
votes
1answer
34 views

Max-width not working on Flexbox item (item is shrinking to width of content)

I have a full viewport width, full viewport height "hero image" on a homepage. I've made this a Flex container. Inside the flex container is one child div (containing a heading). This flex item should ...
-2
votes
0answers
27 views

Flex Direction component settings

I am newbie about css and html design. I use flex in my bootstrap design. I set the flex to sort the components from left to right direction. As on the this site. I want to shrink the slider to the ...