Category "css"

How to color navbar with width 100% while inside bootstrap container

I have this code https://jsfiddle.net/kxrmcpzn/ <!DOCTYPE html> <html class="no-js" lang=""> <head> <meta charset="utf-8" /> &

i would like to send html content with css to email using php. this i got so far. all work but the content that was sen in email is not interpreted

this is the code where i send email. the file_get_contents(); i retrieve the content but in plain format text. the css style didnt read. <?php use PHPMaile

When I go to login page it is in desktop mode (responsive design disappear)

everyone! I am working on a project that is based on this template. Everything is OK on the template except for the login page. The problem there is that when s

Re-sizing image resizes entire nav-bar & links

I'm writing simple HTML & CSS & JS code, I've trying to create a responsive nav-bar with my logo as a link for the home page - however, when the navbar

Why do my span box changes shape on mobile view

You can see in the picture below, it displays normally on desktop, but changes on a mobile view. I created this box with a span and added some objects in it, bu

Text in front of looped video

I have a looped video with this css code .bg video{ position: absolute; top: 80px; left: 0; width: 100%; height: 91.4%; object-fit: cover; This is the HTML cod

css toggle nailboard effect

The interface shown below toggles if the toggle button is clicked. For now I used only opacity to toggle the visibility but it doesn´t look even close wha

How to size images by height and auto width with NextJS Image Component

I have images that I would like to have a fixed pixel height and auto width with object-fit: contain. How does one achieve this behavior with NextJS Image Compo

Is there a way to make custom CSS properties in JavaScript?

Is there a way to create custom CSS properties in JavaScript? Example Note: this code won't work, it's just showing the sort of thing I'm looking for. I'm looki

How do i get my sticky navbar to work using tailwind css?

I am working on a website using tailwindcss. But for some reason the navbar wont work when using the "sticky" class. I tried using the "fixed" class instead, bu

Preloading a large background image without rendering the website

I would like to make sure that my image preloads properly, as there's an svg effect, that only looks good when the background is loaded. function preloader() {

CSS : selecting multiple nth-child

Say I have this css : div div p:nth-child(1), div div p:nth-child(2), div div p:nth-child(3), div div p:nth-child(4), div div p:nth-child(5) { } This will sele

is there a way to make the ":active" selector's style apply to the currently hovered element when the mouse is moving between elements

when you click on one of the 'cButton' elements, the active style will be applied to it but if you hold the mouse button down and then hover over another cButto

How to add overlay to sidenav menu?

I have a sidenav menu with some Js, I would like to add the overlay but I don't know how to do it, sorry but I'm a beginner. I tried several ways without succes

Why is my scroll behavior which is set so smooth, not working?

here is my code: https://codepen.io/vexisqt/pen/GRQoogQ for some reason scroll-behavior: smooth; is not working html { height:100%; scroll-behavior: smo

custom size of field in crispy form django not working

i want to display a form to create posts. i use crispy-form and it currently displays: with html template: {% extends 'blog_app/base.html' %} {% load crispy_fo

At the time of priniting page is breaking in 2 page but first page has blank space

I had created a bill format in HTML and when I am viewing it in browser it viewed perfectly but when I am trying to print it is breaking in 2 pages. I am attach

Why is my image shifted down in print mode (at least in Chrome)

If you look at https://double-seven.dev.sfindr.com/html-pdf-demo/index.html in Chrome, everything is nice and in place, but if you open the print preview window

Second graph on the same page with dash and styling specific elements with external stylesheet

I am having trouble fitting two graphs onto one page in dash-plotly. When using code attached below only the top plot is being displayed. Besides that, I do not

how to get a section to flex in a column

I'm working on media queries, I'm trying to go from a tablet view to a desktop view. I can only get one or the other right, not both. https://imgur.com/gallery/