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
0 answers
8 views

Fitting images to the same height and scrolling sideways

I'm trying to make a basic portfolio site with some pictures and was aiming to make it all fit into a single view and scroll the images in from the side as the user scrolls. I also have images that ...
Will C's user avatar
  • 1
0 votes
1 answer
18 views

paragraph goes down when float:left

why does the word "what" go down next line when floating left? why is not besides the word why? they are both paragraphs. I am a html/css noobie am still learning, thank .container{ ...
theSpellBinder's user avatar
-1 votes
0 answers
13 views

TailwindCSS to CSS3 [closed]

I don't know why react is easier than css3(cascading stylesheet) but Is there any way to convert Tailwind CSS from react to normal CSS? I tried to write it manually but takes lot of time but some of ...
Kathan Patel's user avatar
1 vote
2 answers
21 views

How to Control Font Size in Table for Mobile View

I am trying to control font size of the text inside the 1x3 table for mobile view only. Yes, I included: <meta name = "viewport" content = "width=device-width, initial-scale=1.0&...
Need help's user avatar
  • 303
0 votes
0 answers
6 views

Blazor css isolation hot reload not working

I have a Blazor component named Comp.razor and nested inside it is a Comp.razor.css file. All of these files are located in a class library project. In my main project (the one I launch the app from), ...
Lemon Grab's user avatar
0 votes
1 answer
38 views

How do I align an image to text? [duplicate]

I am building a website for a class and I am trying to create a navigation bar. I want it to look like this, created in Adobe XD. I want the strawberry logo to be aligned to the text and have all of ...
chocolate8235's user avatar
0 votes
1 answer
14 views

Carousel linked roll to the side independently

I have a page with multiple carousel rows, but whenever I click on the button "next" or "prev" to show the other items of the carousel it impacts all carousels, not only the ...
Pedro Azevedo's user avatar
1 vote
0 answers
15 views

Outline 45 degrees in CSS [duplicate]

The first image is what i'm trying to achieve, the second is what i've managed so far. I'm trying to achieve this alert message using CSS only without importing image 1 2 I'm stuck with the top border ...
Pancit's user avatar
  • 11
0 votes
3 answers
43 views

Altering the opacity of an element in JavaScript

So basically I wanted to alter the opacity of an element in a grid using an event listener. In this event listener I would get the opacity of the element and increment it by 0.1. I used to do this ...
Vulpes Inculta's user avatar
0 votes
0 answers
14 views

Image covering chatbot when clicked, how to fix layering issue

I'm building a web application that includes a chatbot feature and displays images using the Next.js Image component. I've encountered an issue where, when the chatbot is clicked to open, the images ...
Shaz's user avatar
  • 1
0 votes
1 answer
14 views

Centering an image in after or before pseudo element

I'm STUCK on this! I am trying to add an image of 5 stars to a testimonial slider on Shopify. I've been playing in the CSS and have scaled to the size I've wanted the image to be, adjusted spacing, ...
Sam's user avatar
  • 1
0 votes
3 answers
29 views

Background color animation of button element with CSS

I want to animate the background color of a button infinitely using CSS animation (note, this is not CSS transition request). I use the following CSS animation which works on Firefox, but does nothing ...
Tekins's user avatar
  • 151
-6 votes
0 answers
25 views

How to make different parts of my image behave like buttons? [closed]

I am trying to make the different pieces of my image behave like 3 different buttons. So, when the user selects any piece, it highlights the piece like a button. Any ideas on how to achieve this. See ...
newuser's user avatar
  • 489
-1 votes
0 answers
11 views

incompatibility of several effects of div panel in css

I need the background to blur the image by 15px and have a transparency of 10%, and what is even more interesting is the border, which should have a gradient from the upper left corner to the lower ...
ZODIACwv's user avatar
0 votes
0 answers
29 views

Grid Items disappearing

I am making a grid and the elements keep disappearing when the screen gets smaller and they don't go to the next row here is the page.tsx code: import React from "react"; import { ...
Haris Mladenov's user avatar
0 votes
0 answers
26 views

How to stop menu from disappearing

I have made a menu where by clicking one icon, the rest become visible. However, it only becomes visible for a second then disappears. When I press the menu icon, I want the rest to be visible for the ...
Muhammad Ravat's user avatar
0 votes
0 answers
9 views

Wide table breaks layout width

I have a table that is very wide. I have the overflow to auto. However, the table breaks the container and makes the page wider than the viewport by a small amount. It doesn't matter if I make the ...
Tony Basallo's user avatar
  • 3,044
0 votes
1 answer
24 views

Can props be passed into tailwindcss classes?

What I'm trying to do - create a reusable component that passes values into an extended background image class. The issue - the background image is not appearing until after I first run the jsx with ...
Todd Holford's user avatar
-1 votes
0 answers
10 views

Popup backdrop blur in tailwindcss

when i open my popup on the website and hover on the title of a website i get this bug where tabs show behind the blur . this happends only when i'm using backdrop-blur in tailwindcss . How to fix it ?...
Abdallah Ag's user avatar
-4 votes
3 answers
34 views

How to Highlight/clickable Irregularly Shaped Interlocking Puzzle Pieces of an image [closed]

I am trying to highlight a particular interlocking pieces (resembling a puzzle) upon hovering over the image. Is there a method to achieve this considering the irregular shapes of the pieces? My goal ...
newuser's user avatar
  • 489
-1 votes
0 answers
21 views

How do I properly align the text and have the image to the right? [closed]

I have the page working properly on my phone but on desktop I need the pictures to the right of the text. I've been playing with the Bootstrap columns but I can't seem to get it right. Here's the ...
R3CKL3SSNL's user avatar
1 vote
2 answers
19 views

Issue with mat-datepicker-toggle disabled Icon color in Angular Material 15.2.9

I'm currently working with Angular Material version 15.2.9 and encountering an issue where the disabled state of the mat-datepicker-toggle icon remains black, whereas the enabled state correctly shows ...
JiboOne's user avatar
  • 1,508
1 vote
1 answer
50 views

Button is not placed on the html div position

I have a JavaScript generated table the user can interact with. Bellow the table, after generating it, a button should be displayed, so it has the display: none after init in my css file. function ...
Cats's user avatar
  • 39
0 votes
2 answers
23 views

JavaScript Riddle Game: Incorrect Input Validation Always Returns Correct, How to Fix?

This basic riddle game presents the player with a random riddle from an array of objects and prompts them to input their answer. but, there's an issue with input validation causing incorrect answers ...
mather's user avatar
  • 1
0 votes
1 answer
15 views

facing a problem with managing state in React javaScript

I am trying to toggle the 'checked-radio-btn' class and show or hide some content based on this class. It gets applied on the first click, but it doesn't get removed from the previous element when ...
Md Mazhar Ali's user avatar
1 vote
1 answer
17 views

Angular Material input - textarea with grow in flexbox

I want to let the textarea flexible grow depending on the what space is available. So basically if I have the <form> <mat-form-field class="example-full-width area-1"> <...
LeO's user avatar
  • 4,694
0 votes
0 answers
12 views

How to export the content of a shiny tab containing HTML elements and CSS flexboxes in pdf format?

I've defined a shiny tab containing HTML elements and CSS styles. This tab is divided into 3 columns, each containing rectangles: all created with div(). When I launch the application, I get the ...
Mathis's user avatar
  • 1
-2 votes
1 answer
27 views

Custom shape with clip-path

div { position: fixed; bottom: 0; background-color: green; height: 50vh; width: 100vw; } <div></div> Is it possible to do this kind of shape with clip-path and svg? I ...
Sheppard25's user avatar
0 votes
1 answer
28 views

Problem positioning an icon in a search bar

In this div I have an input for my search bar, an icon that performs the search and an icon that deletes the text the user has typed. I have a problem with the positioning of my delete icon, it doesn'...
tsazuki's user avatar
0 votes
0 answers
7 views

Angular website kt-aside shifting elements to the right on initial load, but not after

I have a bit of a doozy for you here. So I have a span that gets displayed and positioned on an HTML Canvas element when certain elements on the canvas are hovered over, and hidden when they are not. ...
Zachary Demmel's user avatar
1 vote
0 answers
18 views

How to split a wide HTML page into two pages when printing

I have a very simple HTML page with 42cm of width (doubled width of A4). original HTML page When I try to print it, I get croped version of this page, smth like this: print But instead of this, I want ...
Petro's user avatar
  • 11
0 votes
1 answer
22 views

How do I add pagination to the swiper slider activity class?

enter image description here How to add an activity class to a viewed pagination and vice versa remove it when you return to it Sweeper slider Maybe you can make a custom progress bar somehow I would ...
Майя's user avatar
2 votes
2 answers
55 views

Flex-item overflow in main-axis direction

I'm really sorry about this question, because I've already seen many similar questions on here, but I still can't figure it out. I'd like to create an overlay element with controls for a display ...
panda-byte's user avatar
0 votes
0 answers
9 views

Why cant my sprite image display on the browser when the same sprite without transparent pixels or reduced size will?

Okay this is quite a long question but i will try to sum it up. I have made a simple html, css and javascript code. The JS tracks the amount of scroll trought the webpage and it is linked to the css ...
Bundalo Mihailo's user avatar
-1 votes
0 answers
20 views

3 float left div alignment issue [duplicate]

I'm trying to align these three div with float but somehow it doesn't work I don't know why. In given example 3rd div should cover all the blue side but it goes only half of it. It's probably due to ...
kdrsfr's user avatar
  • 41
0 votes
1 answer
23 views

Get rounded corner while using a border created with clip-path

I am trying to create the following shape (https://i.stack.imgur.com/cZmav.png right now i am using a clip-path to create the border, because of the corner in the bottom-right. however i am having a ...
Shelas's user avatar
  • 21
0 votes
1 answer
22 views

Hide the default select dropdown panel

Can you please let know the css code to hide the default drop down panel highlighted below. I wrote this code , But it is hiding the options , but not the entire panel option { display: none; } I ...
user8184933's user avatar
0 votes
0 answers
16 views

How do I make these 2 flipcards appear side-by-side? [duplicate]

How do I make these 2 flipping cards side-by-side? Here is the code and the image. I used the w3 TriIt think to instantly test the output with saving to a github repository. Is it because I should ...
Stronghold171's user avatar
-4 votes
0 answers
31 views

logo title not showing in laravel [closed]

i use laravel. on the index page, the logo title does not appear but on other pages the logo title still appears. At the local development stage, the title logo also appears. check on this website ...
Thariqhat Rama Putra's user avatar
-4 votes
0 answers
15 views

My Chess Sets - Copying Website HTML and CSS Question [closed]

My Chess Sets - Copying Website HTML and CSS Question Hey, i would like to find and extract the html + CSS from this website and copy it to my website. https://mychessets.com How should i approach ...
shop watch's user avatar
0 votes
1 answer
33 views

Cant move to the left or top the image

i am pretty new in css, html. Currently i am having a issue, cant reach the top or the left when zoom in, looks like this never happend when i zoom out !DOCTYPE html> <html lang="en"&...
Juane Lo's user avatar
1 vote
1 answer
17 views

How to add Space on the top for all print pages using html and css

First Page Second Page Actually I am converting html to PDF using Node JS. PDF also successfully generated but when it comes to PDF multiple pages not properly showing. I tried to add header and ...
Hari Venkatachalam's user avatar
-3 votes
0 answers
19 views

Is it possible to replicate Mondrian's tableau no. iv: lozenge composition with red, gray, blue, yellow, and black using css grid? [closed]

Since February, I became a part of the complete web development bootcamp by Dr. Angela Yu where every student required to pass through the project to go to the next section. It's been a challenge to ...
Gagandeep Singh's user avatar
0 votes
0 answers
17 views

Math behind converting SCSS 'darken' to equivalent 'color-mix' function

Say one has the following CSS: color: darken(#ABCDEF, 10%); I tried color: color-mix(in srgb, #ABCDEF, #000 10%), and unintuitively enough, it doesn't match! Sure enough, looking up the Source Code ...
Luke A. Leber's user avatar
-1 votes
0 answers
8 views

How to Create a Custom Styled Card Component with Tailwind CSS [duplicate]

I'm trying to create a custom styled card component similar to the one shown in the attached image using Tailwind CSS. The card has a unique shape and custom styling, including rounded corners, ...
Hussain Ashraf's user avatar
-4 votes
0 answers
27 views

What are the most important concepts to know in the following languages to land a job? [closed]

So I've been learning web development for a while, and I'm quite curious about what the most important concepts are that I should know in the following languages/frameworks (including HTML & CSS) ...
developerscope's user avatar
0 votes
2 answers
22 views

How to change color of input or bootstrap autofill of this class(input#email.form-control)

Basically I wanted to change the color of input fields when using browsers autofill or saved emails (dropdown of previously used emails in the same input box). For that I was using these css ...
Suton's user avatar
  • 9
-1 votes
1 answer
40 views

how to change image color in CSS [closed]

I'm a css/html/js all that domain - beginner. so i am learning to code an app I added a white png to a code: <div class="todo-app"> <h2>To-Do list <img src="...
gowb0w's user avatar
  • 1
1 vote
0 answers
19 views

Is it possible in FullCalendar to set the size in which a MaxEvents popover starts

Is it possible to set a max content height for all events within a cell so that if a specified height is exceeded then any further overflowing events will fall into the max event popover. I know it is ...
Js94's user avatar
  • 11
-1 votes
1 answer
34 views

Order of CSS Grid is off

Codepen: https://codepen.io/saerts/pen/poBxzNR I have an HTML setup like this: <div class="container"> <div class="block top">Top</div> <div class="...
saerts's user avatar
  • 25

1
2 3 4 5
16092