When creating a sign up form with the label and input how can I make it so the words appear on top of the input bar instead of the side

Hello,

I'm working on developing a responsive multi-level menu with accessibility features. However, I'm encountering an issue with properly positioning the third-level submenu (e.g., menu 2.6.4.1). The desired behavior is for the submenu 2.6.4.1 to appear adjacent to its parent submenu (e.g., menu 2.6.4) and list its items vertically below it."

the Code : https://codepen.io/stef5911/pen/YzMRPRe

this menu is based on code from : https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/

It has accessibility Features
https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/#accessibilityfeatures

and Keyboard Support
https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/#kbd_label

CSS :
u/charset "utf-8";
.page header {
background: #17323f;
color: white;
text-align: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.page header .title {
font-size: 2.5em;
font-weight: bold;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.page header .tagline {
font-style: italic;
}
.page nav {
margin: 0;
padding: 0;
border: 2px solid #eee;
}
.menubar-navigation {
margin: 0;
padding: 2px;
font-size: 100%;
list-style: none;
background-color: #17323f;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.menubar-navigation li {
margin: 0;
padding: 0;
border: 0 solid black;
list-style: none;
}
.menubar-navigation > li > [role="menuitem"] {
text-transform: uppercase;
}
.menubar-navigation [role="menu"] [role="menuitem"] {
text-transform: none;
}
.menubar-navigation > li {
display: inline-block;
position: relative;
}
.menubar-navigation > li li {
display: block;
}
.menubar-navigation > li > [role="menuitem"] {
display: inline-block;
margin: 2px;
padding: 4px;
padding-bottom: 8px;
background-color: #17323f;
color: #ffffff;
}
.menubar-navigation [role="separator"] {
padding-top: 3px;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='0' y1='6' x2='12' y2='6' style='stroke:black;stroke-width:1' /%3E%3C/svg%3E%0A");
background-size: 10px 10px;
background-position: center;
background-repeat: repeat-x;
}
.menubar-navigation [role="menu"] [role="menuitem"],
.menubar-navigation [role="menu"] [role="separator"] {
display: block;
width: 12em;
margin: 2px;
padding: 4px;
padding-left: 8px;
background-color: #17323f;
border: 0 solid #eee;
color: #ffffff;
}
.menubar-navigation [role="menuitem"] svg {
fill: currentcolor;
stroke: currentcolor;
}
.menubar-navigation [role="menuitem"] svg.down {
padding-left: 0.125em;
}
.menubar-navigation [role="menuitem"] svg.right {
position: absolute;
padding-top: 0.35em;
right: 0.75em;
}
.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.down {
transform: rotate(180deg);
}
.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.right {
transform: rotate(90deg) translate(5px, -5px);
}
.menubar-navigation [role="menu"] {
display: none;
position: absolute;
margin: 0;
padding: 0;
padding: 7px 4px;
border: 2px solid #ffffff;
background-color: #17323f;
left: 100%;
top: 0;
min-width: 12em;
z-index: 1;
}
.menubar-navigation [role="menu"] [role="menu"] {
display: none;
position: absolute;
left: 100%;
top: 0;
margin: 0;
padding: 7px 4px;
border: 1px solid #ffffff;
background-color: #17323f;
min-width: 12em;
z-index: 2;
}
.menubar-navigation [role="menu"] [role="menu"] [role="menu"]{
display: none;
position: absolute;
left: 100%;
top: auto;
margin: 0;
padding: 7px 4px;
border: 1px solid #ffffff;
background-color: #17323f;
min-width: 12em;
z-index: 3;
transform: translate(100%) translateY(-36px);;
}
.menubar-navigation [role="group"] {
margin: 0;
padding: 0;
}
/* aria-current styling */
.menubar-navigation > li > [role="menuitem"][aria-current],
.menubar-navigation > li > [role="menuitem"].aria-current-path {
padding-bottom: 2px;
border-bottom: 4px solid #17323f;
}
.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current] {
padding-left: 4px;
border-left: 4px solid #17323f;
}
/* focus styling */
.menubar-navigation.focus {
padding: 0;
border: #fffffff; solid 3px;
}
.menubar-navigation > li > [aria-expanded="true"],
.menubar-navigation > li > [role="menuitem"]:focus,
.menubar-navigation > li > [role="menuitem"]:hover {
outline: none;
background-color: #17323f;
}
.menubar-navigation > li > [role="menuitem"]:focus,
.menubar-navigation > li > [role="menuitem"]:hover {
padding: 2px;
padding-bottom: 4px;
border: 2px solid #17323f;
outline: 2px solid white;
}
.menubar-navigation [role="menu"] [aria-expanded="true"],
.menubar-navigation [role="menu"] [role="menuitem"]:focus,
.menubar-navigation [role="menu"] [role="menuitem"]:hover {
outline: solid;
outline: #ffffff;
background-color: #17323f;
color: #ffffff;
}
.menubar-navigation [role="menu"] [role="menuitem"]:focus,
.menubar-navigation [role="menu"] [role="menuitem"]:hover {
padding: 2px;
padding-left: 6px;
border: 2px solid #17323f;
outline: 2px solid white;
}
.menubar-navigation > li > [aria-expanded="true"].aria-current-path,
.menubar-navigation > li > [role="menuitem"].aria-current-path:focus,
.menubar-navigation > li > [role="menuitem"].aria-current-path:hover,
.menubar-navigation > li > [role="menuitem"][aria-current]:focus,
.menubar-navigation > li > [role="menuitem"][aria-current]:hover {
padding-bottom: 2px;
border-bottom: 4px solid #17323f;
}
.menubar-navigation [role="menu"] [aria-expanded="true"].aria-current-path,
.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path:focus,
.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path:hover,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current]:focus,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current]:hover {
padding-left: 4px;
border-left: 4px solid #17323f;
}

Thanks for Help

Html:

<a href="index.html">Resume</a> &nbsp; &nbsp;

<a href="autobiography.html">Autobiography</a> &nbsp; &nbsp;

<a href="major.html">Major</a> &nbsp; &nbsp;

<a href="biography.html">Biography</a>

<img src="assets/jedi.jpg" alt:"logo">

At the heart of my role, I forged strong bonds with impactful

non-profit organizations like Pridelines, NAACP, Miami Center for Racial Justice,

Mosaic Miami, and South Florida People of Color.

Together with the amazing Barry community, we embarked on inspiring

journeys towards systemic

equity, engaging everyone in meaningful initiatives.

​

CSS:

body, html {

height: 100%;

margin: 0;

padding: 0;

}

h1{color:black;}

body{font-family:'Bahnschrift', sans-serif; }

img{height: 30%;

width: 650px; align-content: center;}

section{display: flex; margin-left: 20px;margin-right: 0px; flex-direction: row;height:100%;}

.container img{border-radius: 50%;}

header{text-align: center;}

text.div{flex: 1;margin:0px;padding: 0px;font-family:'Bahnschrift', sans-serif; }

.content {

display: flex;

align-items: flex-start; /* Align items at the start of the flex container */

padding: 20px; /* Add some padding to the content */

}

.image {

margin-right: 20px; /* Add some space between image and text */

}

img {

max-width: 100%; /* Ensure the image stays within its container */

height: auto; /* Ensure the image maintains its aspect ratio */

}

.text {

max-width: 70%; /* Set a maximum width for the text */

}

.container ul {

margin: 0; /* Remove default margin */

padding: 0; /* Remove default padding */

}

body{background-image:linear-gradient(#1014B8,#4287f5,#5693f5);}

.container text{max-width: 50px;font-family:'Bahnschrift', sans-serif; }

button{background:linear-gradient(to right, black, white);

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

border-radius: 300px;

font-family: "Bahnschrift", sans-serif;}

h1{font-family: "Bahnschrift", sans-serif;}

.container{position: absolute; width: 450px;top: 0;

height: 55px;

background-image: linear-gradient(#349eeb, white);

border: 2px solid #ccc;

border-radius: 25px;

padding: 20px;

margin: 0 auto;

box-sizing: border-box;

;position: fixed;top:10;

left:0;right:0; align-items:center; justify-content:center;display:flex;

z-index:1;}

nav {

list-style: none;

align-self: center;

top: 0;

left: 0;

width: 100%;

padding: 10px 0;

box-sizing: border-box;

z-index: 999; /* Ensure the navigation bar is above other content */

}

​

Hey team,

Started web development for the first time today all seems to be going well fumbling my way through but am stuck! My issue is with class setting. I set a class for a group of elements in the HTML file and update the styles in the CSS file but nothing seems to update for me for some elements?
The ".login-button" seems to be working and updating, just not the ".login-details" ccs group

Any help appreciated!

html+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<!DOCTYPE html>
<html>
    <head>
        <title>Geraghty Bank</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <form>
            <h1>Geraghty Bank <img src="logo.png" alt="logo" width="50" height="50"></h1>
            <div class="login-details">
                <input type="text" placeholder="Username"> 
            </div>
            <div>
                <input type="Password" placeholder="Password">
            </div>
            <input type="submit" value="Login" class="login-button">
            <div>
        </form>
    </body>
</html>

CSS+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

*{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}
body{
    min-height: 1000vh;
    background-color: #284a6e;
}
form {
    background-color:#284a6e;
    width: 500px;
    height: 580px;
    padding: 75px 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
h1{
    text-align: left;
    margin-top: 0px;
    padding: 0px;
    border: 0px;
    margin-bottom: 30px;
    color: #E7DFD4;
    font-size: 40px;
}
.login-details{
    border-bottom: 2px solid white;
    position: relative;
    margin: 5px 0;
    background-color: none
}
.login-details input {
    background-color:none;
    border: none;
    outline: none;
    width: 100%;
    color: #E7DFD4;
    height: 30px;
    font-size: 15px;
}
.login-button{
    height: 45px;
    width: 100%;
    color:#E7DFD4;
    background-color:#284a6e;
    border: none;
}

I know about text-align but that only centers horizontally. How do I center vertically so that the text is in the middle of my container?

Hello. I'm trying to hide a specific class on my page that displays an episode list for ghost visitors. I've identified the class and attempted to write the necessary code/scripts using ChatGPT, but it doesn't work correctly. The issue is that the content remains hidden even for logged-in users. I believe my script is not functioning properly, and I'm unsure how to fix it. Thanks.

That's what we got so far. It's about Wordpress's theme:

What i've added in Style.css

login-message {

color: red;

text-align: center;

font-size: 16px;

padding: 10px;

background-color: #f8f8f8;

border: 1px solid #ccc;

}

.epcheck {

display: none;

}

What i've added in footer.php

What i've added in single-anime.php above <div class="bixbox bxcl epcheck">

Edit: I should provide an example. Here I have a bunch of selectors and I forget which elements a lot of these target. This makes refactoring and trying to improve lag more difficult

.list-bullet:after, .list-bullet:before, .snw-header-count-wrapper, input[type=checkbox]:checked:after,
.better-command-palette .better-command-palette-title, :is([data-callout*="no-title"], [data-callout*="quote"]) > .callout-title, #influx-react-anchor-div br, .markdown-source-view.mod-cm6 .cm-foldPlaceholder, .cm-line:not(.cm-active) .cm-hashtag-begin, .cm-active .cm-hashtag-end:before, .cm-hmd-codeblock .cm-indent:before, .popover.hover-popover,
.svg-icon:is(.help, .fa-Images, .lucide-mic, .dice), .markdown-source-view:not(.is-live-preview) span:has(.link-favicon, .link), .dataview.small-text::after, .dataview.small-text::before, .inline-embed + .cm-line .snw-reference, .cm-embed-block .snw-reference, .mod-fade:not(.mod-at-end):after, ::-webkit-calendar-picker-indicator, .better-command-palette .hidden-items-header, .internal-embed ~ .cm-widgetBuffer + .snw-reference, input[type=checkbox][data-indeterminate="true"]:not(:checked):after, .metadata-container:not(:has(.metadata-property:nth-child(4))) .metadata-add-button.text-icon-button, [data-callout="todo"] :is(.embed-title.markdown-embed-title, .block-language-dynbedded), .menu-separator, .menu .menu-item.is-label:first-child :after, .tooltip-arrow, .metadata-property-icon:before, .search-result-file-matches > div:not([class]), [data-callout="todo"] div:has(> .block-language-dataview), .suggestion-flair, .metadata-properties-heading {
    display: none !important;
}

My CSS has 3000 lines in it and some blocks have dozens of selectors for different elements, and I forget why I added them but always have a reason for doing so. I wonder if I should start writing down what elements each selector is for.

Best news ever! We created a comprehensive, constantly-updated Squarespace CSS selector cheat sheet and it’s FREE!

https://ajmexperience.com/learn-posts/squarespace-css-cheat-sheet

I have one div with, by default, minimum of 4 elements inside it and I set padding-top:70px; , so first element starts roughly at the center of the div.

But user has an ability to add more elements, and because of the padding set to 70px, overall look is going to break immediately.

I need the padding that adjusts itself decreasing in value, depending on the number of elements. But the minimum value has to be 10px.

Like this:

​

Are there special media queries for the Safari browser? I tried to find online but no luck. In chrome my app looks good, but in Safari, poop 💩.

I made a video to show exactly how flexbox works with 12 different demos. Since this is one of the core concepts that people writing CSS need to know, I thought this might be helpful.

What other CSS concepts are you all struggling with that might be helpful to make into a video?

Hey guys, how yall doing?

I can't seem to get a way to make a custom font work on my application.

I'm currently importing 2 fonts as a @font-face:

@font-face { font-family: 'Waxe'; src: url('../../public/assets/fonts/Waxe.ttf') format('truetype'); src: url('../../public/assets/fonts/Waxe.otf') format('opentype'); }

@font-face { font-family: 'Arial-Rounded'; src: url('../../public/assets/fonts/arial-rounded-mt-bold.eot'); src: url('../../public/assets/fonts/arial-rounded-mt-bold.svg') format('svg'); src: url('../../public/assets/fonts/arial-rounded-mt-bold.ttf') format('truetype'); src: url('../../public/assets/fonts/arial-rounded-mt-bold.woff') format('woff'); }

.waxe { font-family: 'Waxe', sans-serif; }

.arial { font-family: 'Arial-Rounded', sans-serif; }

The first font 'Waxe' is working just fine! But i can't get the Arial to work, what am i doing wrong?

Hello, can someone give me some help here, please?

How to add <h1> tag in the <?php echo substr(get_the_title($post_name), 0, 20); ?> without break the site layout?

<div class="blkBar topratings">
<i class="galBIcon"></i>
<?php echo substr(get_the_title($post_name), 0, 20); ?>
<span class="custom-rating">
<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
<span class="page_post-titl">Gallery Rating</span>
</span>
</div>

This is how it looks without the <h1> tag: https://prnt.sc/GtjJMyKvgNMG

This is how it looks after I add the post title between the <h1> tags: https://prnt.sc/vVkWRU9Nxqcf

<h1><?php echo substr(get_the_title($post_name), 0, 20); ?></h1>

.blkBar, .grnBar {
margin: 15px 0px;
background: #000 url(../images/bar-pnk.png) right top no-repeat;
border-radius: 5px;
padding: 5px 15px 2px;
font-size: 24px;
line-height: 36px;
color: #fff;
font-family: 'AvenirNextLTPro-Bold';
text-align: left;
text-transform: uppercase;
position: relative;
}
span.custom-rating {
display: block;
margin-top: -5px !important;
margin-bottom: 0px !important;
height: 43px;
width: 237px;
position: relative;
float: right;
}

I need to show exactly how it looks but with the <h1> tag. Can someone help me, please?

Thank you in advance.

I’m working on a Django polls project and struggling to get the correct font to display. Here’s my code, it’s very basic and the issue is probably located in the only .css file contained in the repo. I’ve tried various solutions like checking the file path in my CSS and ensuring the font file has the proper access permissions. However, the issue persists. Do you have any suggestions on what else I could try to resolve this?

.div{
    margin:0px 20px 0px 20px;
    float: left;    
    i{
      color:#A2D2FF;
      float: left;
      position: relative;
      font-size:30pt;
      &:hover{
        opacity:0.7;
        cursor: pointer;
      }

I'm trying to create some sort of slider with only one image visible and a css animation will trigger to show the next one.

I created the animation I wanted but I'm struggling to get it fully working, right now the animation only executes well 2 times and perfectly shows the new image. but after that it just show the new image without the animation

This is the code I have right now

Hi, Sadly , none of my friends are currently preparing for competitive exams. Since I'm aiming for the CSS exam in 2025, I'd love to connect with someone to discuss our studies daily. We could chat about specific subjects, preparation methods, or anything related to the CSS. If anyone here is interested, please let me know! Additionally, I'd be grateful if anyone could recommend any CSS preparation groups I could join. Looking for someone in Lahore would be ideal , thanks

For some reason I can't add "screen" to my media line in the CSS file and I'm not able to create the responsive layout design I want to achieve. Does anyone have any insight on this issue?

Also, I am using a MBP and for some reason chrome is displaying changes correctly and safari is showing the boxes vertically. This was before I tried changing the flex orientation in the CSS file, but nothing is working. And even though I have the initial scale set to 1, it's displaying zoomed out on my phone.

Git Link

HTML code-

<!DOCTYPE html>

<header>
    <h1>Our Menu</h1>
</header>

 <div class="row">
    

        <div id="item1" class="col-lg-4 col-md-6 col-sm-12">
        <h2 class="protein" id="chicken">Chicken</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, totam error vitae nulla nostrum quaerat debitis eligendi harum eius aspernatur velit id in corrupti sint animi, saepe, rem aperiam illum.</p>
        </div>


   
        <div id="item2" class="col-lg-4 col-md-6 col-sm-12">
        <h2 class="protein" id="beef">Beef</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At eum, molestias alias consectetur nesciunt repudiandae officia ut! Repellendus sequi incidunt rerum, eaque quia, alias ducimus modi sunt eligendi cumque libero.</p>
        </div>
    

    
        <div id="item3" class="col-lg-4 col-md-12 col-sm-12">
        <h2 class="protein" id="sushi">Sushi</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis aspernatur, excepturi iure quod vel sed distinctio totam doloremque atque id consequatur ad, amet ducimus facere natus. Et pariatur dignissimos quibusdam?</p>
        </div>
    
    
    </div>
</div>

CSS code-

*{
box-sizing: border-box;
margin: 0;
padding:0;

}

h1{ text-align: center; font-family: Courier New, monospace; font-size: 250%; }

body{ font-family: Courier New;

}

p { background-color: #dde6d5; border: 1px; text-align: center; margin-top: 0%; font-size: 95%; }

h2.protein{ border: 1px; border-style: groove; font-weight: bold; text-align: center; color: whitesmoke; text-align: end; margin-bottom: 0%; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }

#chicken { background-color: tomato; border: 1px; }

#beef { background-color: #039fdb; border: 1px; }

#sushi { background-color: #FFBD33; border: 1px; }

.row{ display: flex; width: 100%; margin-right: auto; margin-left: auto; padding:5px; }

.container{ position: relative; }

#item1{ display: inline-block; margin: 10px; clear: right; padding-left: 10px;; }

#item2{ display: inline-block; margin: 10px; clear: right; }

#item3{ display: inline-block; margin: 10px; clear: right; padding-right: 10px; }

@media (min-width: 992px) { .col-lg-4 { float: left; clear: right; } .col-lg-4{ width: 33.33%; } }

@media (min-width: 768px) {.col-md-6, .col-md-12{ float:left; clear: both;} } .col-md-6{ width: 50%; } .col-md-12{ width: 100%; }

@media (max-width: 767px) {.col-sm-12 { float:left; } } .col-sm-12{ width: 100%; }

Thanks y'all!

Hey guys, a friend of mine is proficient in design and uses Figma for it. I'm good at JS and have written a few projects. However, we want to combine our projects, but neither of us know enough CSS to host it online in the design format.

Any way I can convert the Figma into CSS? I couldn't find any plugin for it.

I ordered 2 pair of shoes and a zip jacket on CSSbuy for the First time. I got a package with the shoes but Not with the jacket although it says on the App it says that it should have came all together. The Support also doesn‘t give me useable help. The package with the shoes came two weeks ago.

I know the class its this
"box-border relative shrink-0 cursor-pointer
button-medium px-[var(--rem14)]
button-primary
items-center justify-center
button inline-flex "

but idk how to use it in css

Have the perfect Squarespace CSS snippet but only want to apply it on mobile? Here’s the guide you need!
https://ajmexperience.com/learn-posts/apply-squarespace-css-to-mobile

.Main Right { Background-image: ____; Background-size: cover Width: 63%; Height: 69vh; Float: right; Position: relative; Right: 0; }

(Main R2 is in div class=“Main_Right”)

.Main_R2 { Height: 69vh; Width: 100%: Background_color: ______; Position: absolute; Right: 0; Top: 0; Display: none; Z-index: 1; }

.Main_R2:hover { Display:block; }

media query help

does a media query like max width 600px look at the resolution of the device or at the viewport of the device? for example, an iphone 15 has a resolution of 1179px in width, but has a viewport width of 393px. will the media query of max width 600px include the iphone 15 or not?

I don’t know the rest of the code.

I was just wondering, what the rest of the code was.

How it was created.

https://open.spotify.com/

https://jsfiddle.net/v1gj9r2f/2/

<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99902 14H5.99902V0H3.99902V14ZM-0.000976562 14H1.99902V4H-0.000976562V14ZM12 7V14H14V7H12ZM8.00002 14H10V10H8.00002V14Z" fill="#1DB954" />
</svg>

Image: https://i.imgur.com/PvpdsZb.png

Here is the gif that is used: https://i.imgur.com/xbbkU5I.gif

But, how is that used with the svg?

What purpose does the svg serve?

How does one get put with the other?

I'm trying to overlay text and a logo onto an image, which works fine until I change the viewport size.

The image-container div contains an image that fills it, a div with text positioned over it, and a logo image positioned over it.

The objective: everything stays the same relative size until the view-port reduces to the point that the image starts to shrink, at which point the text and the logo will start to shrink maintaining their size relative to the image.

What happens: As soon as I change the view-port enough to shrink the underlying image, the logo graphic shrinks but the text in the text box does not.

My question: How can I make the text in the text box behave like the logo image, shrinking in proportion to the size of the underlying image?

A working demo is at https://barrhavenrotary.ca/dev/overlay/, and the code is below. There's a dashed red box around the text container for the purposes of illustration.

I'll be very grateful for assistance with this.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Superimpose/Overlay Sandbox</title>
<style>
* {font-family:calibri;}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
display: block;
width: 100%;
height: auto;
}
.overlay-text-box {
border:1px dashed red;
position: absolute;
width:60%;
top: 3%;
left:3%;
color: #fff;
padding: 10px 20px;
padding: 3px 0px;
text-align: center;
}
.overlay-text {
position:relative;
color: #fff;
padding: 10px 20px;
padding: 3px 0px;
font-size: 20px;
text-align: center;
}
.overlay-logo {
border:0px solid silver;
position: absolute;
top: 3%;
right:3%;
padding: 10px 20px;
padding: 3px 0px;
text-align: center;
}
.shadow-text {text-shadow: 2px 2px 8px rgba(0,0,0,0.74);}
</style>
</head>
<body>
<h2>TEXT OVERLAY ON IMAGE</h2>

<div class="image-container">
<img src="image.jpg" alt="image">
<div class="overlay-text-box">
<div class="shadow-text overlay-text" style="font-size:160%;">Smallville Children's Charity</div>
<div class="shadow-text overlay-text" style="font-size:140%;">Annual Golf Tournament</div>
<div class="shadow-text overlay-text" style="font-size:120%;">Smallville Country Club - May 13th 2024</div>
</div>

	`<img class="overlay-logo" style="width:12% !important;" src="CGYC_color transparent.png">`  

</div>
</body>
</html>

​

​

I'm trying to create an effect where the hovered letter spin 360 deg on the y-axis (background-color changes for debugging purpose). But the animation just doesn't play. How can I fix this?

index.html

<div class='titleContainer'>
<span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span>
</div>

style.css

.titleContainer > span { font-size: 4rem; }
.titleContainer > span:hover { background-color: red; animation: flip 2s infinite; } @keyframes flip { 
  0% { transform: rotateY(0deg); } 
  50% { transform: rotateY(180deg); } 
  100% { transform: rotateY(360deg); } 
}

I apologize in advance if this is a stupid question but i really cant figure it out. im trying to make a website that looks good on all devices, so im using media queries to add break points. my problem is that if i use a media query like min width 1000px it will trigger the standard 1080p desktop screen, but it will also trigger high resolution phones (iphone 15 has a width of 1179px). what is a better media query to use in that situation?

SUBSCRIBE

JOIN