Stack Overflow | css
643 FOLLOWERS
Stack Overflow is the largest, most trusted online community for developers to learn, share their programming knowledge and build their career.
Stack Overflow | css
11h ago
My project is a web-application. I use Bootstrap lib for navbar and carousel in particular. I want images to be fullscreen so there would be only navbar and images changing each other (as a starting screen).
But for some reason I have white borders around images. I applied multiple CSS styles, used different images with different resolutions, tried starting the app with different resolution and watched multiple guides but reached no desired effect. I checked my code many times and I don't really think that there some parameters block each other.
I want images of my carousel to be fullscreen.
M ..read more
Stack Overflow | css
11h ago
I would like my double border with one line shorter than the other left and right.
the left is current only 1 line missing the smaller one
.double-border {
--b: 2px; /* thickness */
--c: #3CD5AF;
height: 100%;
border-right: var(--b) solid var(--c);
border-left: var(--b) solid var(--c);
background: linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}
<div >
<h4>About the episode subhead lorem ipsum 1</h4>
<p>Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ull ..read more
Stack Overflow | css
11h ago
I'm currently in a web development class working on my final project. I have my homepage mostly set up, so I went to copy and paste the code into a new file to work on a subpage. So I have homepage.html and stylesheet.css and subpage.html and subpage_stylesheet.css (exact copies of homepage.html and stylesheet.css, only the names were changed)
The homepage is displaying normally, but the new files are displaying all weird and zoomed in, even though it is the exact same code.
I really don't know why it's doing this so any help is appreciated. Sorry if I'm missing something really stupid ..read more
Stack Overflow | css
11h ago
I have a dashboard HTML page that has 2 sections:
for vertical navbar for a table of people (and optionally some h1 text later on)
I just want a way for the table to be centered in main, and when it gets smaller a scrollbar appears for x-overflow.
THE PROBLEM IS: when the table gets bigger than the screen it starts hiding behind nav
Additionally if any of you can help me get the scrollbar to appear on the table body rather than outside the table or on the div that would also be greatly appreciated
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> ..read more
Stack Overflow | css
11h ago
I'll be honest....I'm not the greatest at HTML, CSS, and JS...but I get by. I installed a pre-loaded wordpress template and it uses Owl Carousel 2.2.1 to scroll through blog posts on the front page.
The current behavior, out of the box, shows the blog title, read more link, comment link, etc. and then a transparent background. When you hover over the display block, the image that is part of the blog post, is shown, but is zoomed in and only part of the image (which is fine with me).
The behavior I'm trying to fix is the hover. I'm trying to turn that behavior off so that the background image i ..read more
Stack Overflow | css
11h ago
I am trying to use the Next.js Image component in my React project with Tailwind CSS, but I am encountering issues with applying relative positioning styles and other specific styles like objectFit. The problem seems to stem from the container div that Next.js automatically creates around the img tag. Here is my current code:
<section style={{ position: 'relative', width: '100vw', height: '56.25vw', maxHeight: '500px' }}>
<Image
src={carouselItem.image}
alt={`Slide ${carouselItem.text}`}
layout="fill"
objectFit="cover"
className="object-cover object-center aspec ..read more
Stack Overflow | css
11h ago
I use tailwind css to style React components, and am I inspecting my components in responsive mode:
As you can see in the screenshots below, the body represents the information of the screensize accurately, but the value given by max-h-screen is constrained and I cannot understand why:
In tailwind css the value of max-h-screen is 'max-height: 100vh'. And it's not always taking my physical device's height as my device is 1080p and in the second ss it is about 682px.
I've tested in both chrome and firefox with the same result ..read more
Stack Overflow | css
11h ago
I like to have a CSS selector which applies to a DIV element which has inside at least one text part which is currently selected/marked by user.
How can this accomplished?
I think I need something like div:has(any-user-selected-text)
Thanks ..read more
Stack Overflow | css
11h ago
I am currently attempting to make a simple header with HTML and CSS. I have encountered a problem where my button list is not floating to the right, giving the site an odd appearance.
I tried floating the list to the right, floating the ul to the right and as you can see here floating the div to the right.
When I only added the list into a seperate site it actually did float to the right but once I pasted in my CSS it stopped. I couldn't find what was causing it.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
header {
d ..read more
Stack Overflow | css
11h ago
The problem is basically stated in the title, and it occurs only under these conditions:
parent element is display: flex; (or inline-flex), flex-direction: column;, and flex-wrap: wrap;
child element is display: grid;
not in PC browsers (Chrome, Firefox and Edge were all OK), but iPhone browsers (Safari, Chrome, Google App and Firefox)
I avoided using this element structure so this doesn't bother me anymore, but I'm still curious if this is a bug or correct behavior.
If it's not a bug, how can I fix my code to make it look the same on PC and mobile?
Thanks for your attention!
Note: I checked ..read more