Please help get the Request a Quote button to alight to the right.

Thanks in advance!

{

"sections": {

"cart-items": {

"type": "main-cart-items",

"settings": {

"color_scheme": "scheme-1",

"padding_top": 36,

"padding_bottom": 36

}

},

"cart-footer": {

"type": "main-cart-footer",

"blocks": {

"subtotal": {

"type": "subtotal",

"settings": {}

},

"buttons": {

"type": "buttons",

"disabled": true,

"settings": {}

},

"quick_quote_quote_button_KPEbi6": {

"type": "shopify://apps/quick-quote/blocks/quote-button/ba8168dc-3466-4dff-b544-74f8dd051310",

"settings": {

"title": "Request a Quote",

"btn_classes": "button",

"btn_width": "100",

"button_color": "#989393",

"text_color": "#ffffff",

"margin_top": 0,

"margin_bottom": 0

}

}

},

"block_order": [

"subtotal",

"buttons",

"quick_quote_quote_button_KPEbi6"

],

"settings": {

"color_scheme": "scheme-1",

"padding_top": 20,

"padding_bottom": 40

}

}

},

"order": [

"cart-items",

"cart-footer"

]

}

Is it possible to change the height of a drop-down list with CSS? I want to display from "Option 1" to "Option 5" and use the scroll to see the rest but I keep seeing most of items on the list

Here is my code: https://jsfiddle.net/#&togetherjs=fNfUMfOv81

I want someone to modify the code so that the Apple logo stays fixed and does not move.

    .apple-logo {
        width: 300px;
        height: 360px;
        position: relative;
        -webkit-mask: url('img/Apple_logo_white.svg') center/contain no-repeat;
        mask: url('img/Apple_logo_white.svg') center/contain no-repeat;
        background-color: #ffffff;
        overflow: hidden;
    }

    .color-overlay {
        position: absolute;
        top: -25%;
        left: -25%;
        width: 150%;
        height: 150%;
        background: conic-gradient(#fff, #ffb3d9, #ffd1dc, #ffccf2, #d9b3ff, #b3d9ff, #fff);
        animation: rotateColors 5s infinite linear;
    }

    @keyframes rotateColors {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .welcome-text {
        font-size: 48px;
        font-weight: bold;
        background: linear-gradient(90deg, #ff7eb3, #ff758f, #a29bfe, #74b9ff);
        -webkit-background-clip: text;
        color: transparent;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        animation: typing 4s steps(21, end), blink 0.75s step-end infinite;
    }

    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

    @keyframes blink {
        50% {
            border-color: transparent;
        }
    }

</style>

I'm trying to do a redesign for a subreddit I mod but I'm really bad at it. Does anyone know where to go to hire a CSS expert for this?

Hello,

I have some links inside paragraphs on my website and they look and work fine on PC. However, the font size is smaller on iPhone and when I tap the link, it jumps back to the normal font size, sometimes requiring two taps to follow the link. Here is the CSS for the links:

a {
    color: var(--color-link);
    display: inline-block;
    font-weight: bold;
    text-decoration: underline;
}

a:active {
    filter: brightness(var(--active-brightness));
}

a:hover {
    filter: brightness(var(--hover-brightness));
}

Here's an example in HTML:

<a href="https://example.com">link text with styling</a>

I have tried to search online and tested various suggestions, but none of them seem to work for me. Have any of you experienced this? Any ideas are very welcome :-)

I'm sure I managed to do this once before, but I can't figure it out now. I want to make a table (yes, an actual <table> table) that fills (without overflowing) its parent in width, with all column cells tightly fitting their non-wrapping content, except for the second column which should fill any remaining width but hide any overflow of its content.

e.g.:

I'm sure there's some magical combination of min-width, width, max-width that lets you do something like this. Does anyone know what I'm talking about?

Edit: the solution is:

Table: width:100%;
Flexible TD: overflow:hidden; max-width:0px;
All other TDs: width:0px;

I already have some basics of css and html btw

I will help you to learn css simple techniques

https://youtube.com/shorts/QQ2-3PtXOsg?si=TkS1VfsgylfyZ9go

Greetings & Questions:

What would a graph or function be with the following be called?

1. I need at least 5 to 10 different guages or graph lines where they are all linked.

2. If I change, say, 1 of them, the others will change in opposite or stay close to the same chance as the 1 variably changed item.WHat kind of function would this be called?

3. a system of interdependent gauges or variables that react dynamically to changes in each other, possibly like a correlated multi-variable function or a linked dataset with conditional dependencies. 

Does anyone know if there exists free code online somewhere, like on codepen, that would allow me to download and modify the above functionality?

I am trying to center with Flexbox a group of elements (all elements except the "Reset" button) in a div. Then I want to add the Reset button right next to this centered group of elements in the same line, but without the group to adjust their position with Flexbox, they have to stay centered. So basically the group is centered but the reset button is right next to those elements. I am looking for an efficient and most importantly simple solution.

Code:

https://jsfiddle.net/3xmf6cz8/

Hello! I am a beginner and I have been assigned to do this as a project I already have the code (HTML and CSS only) but making it responsive is out of my skillset. I am in no rush either. Please dm me if you have experience in this matter and don’t charge for helping.

https://codepen.io/stringybean/pen/eYqjxjx

https://i.imgur.com/fuCSex7.png

Asking for r/Panathinaikos

https://youtu.be/vKEsIXqEY0w

Why does my subreddit's banner cut off? https://old.reddit.com/r/TatsuroYamashita/

The stylesheet:
header { background-image : url(%%TYJPEG2%%); }

I am trying to get a userstyle working, very simple (I think so but I am not even begginer with css), the userstyle is here https://greasyfork.org/en/scripts/497520-duckduckgo-ai-chat-responsive-customizations the issue i have is , the left side panel does hide, but the rest of the page doesnot get wide, I have tried changing properties for .U6SIOwl59r4JrXnL_Bic, .PSL9z2mGqO2kEMN_ZOJl,..kOMSj8TE0LBty6yatos7,.evMEChInEtheZC5gfFqi but since i actually dont really know how they work, its just like random modifications that dont do anything (except probably moveit left or right or dissapear the content)

this is the part that works: javascript: (function () { var section = document.querySelector('.cuhMRlbsijSWeq8UtkYx'); var div = document.querySelector('.zOYb8r74bS2EZVcmDp2w'); if (section) { section.classList.toggle('hidden'); section.style.transition = 'transform 0.3s ease'; section.style.transform = section.classList.contains('hidden') ? 'translateX(-100%)' : 'translateX(0)'; } })();

the other part must be something (i believe) changing some of the .U6SIOwl59r4JrXnL_Bic, .PSL9z2mGqO2kEMN_ZOJl,..kOMSj8TE0LBty6yatos7,.evMEChInEtheZC5gfFqi attributes, but cant find what so far.

I am using WordPress to make a site. Right now the header, content block, and footer are one right after another on the page, i.e. a ton of space after the footer. How do I get these to responsively fill the whole page? I've tried to use position absolute on the footer but then it covers the content when the screen is too small.

r/csshelp r/html_css r/css

I've been working on this website for almost 5 months now, it's finally finished. However, there's one final nitpick that I just haven't been able to figure out. The way I have the layout set up currently, it fits perfectly on laptop and mobile screens, and overlaps or overflows in a controlled tasteful way on in-app mobile browser windows or screens with strange aspect ratios. However, on larger monitors, the main control panel is too small in the top left corner. Zooming to 125% makes it fit perfect. I've tried multiple different approaches but they all come with more issues than the current layout. I also removed the meta viewport tag because it caused the website to start zoomed in on mobile. Does anyone know a solution? Here's a Pastebin link for the CSS with the base64 data removed and here's a link to the HT3 for reference.

Not sure if this is the right sub, please direct me in the right direction if not.

I help maintain an older WordPress site, and have noticed the responsive pulldown menus look pretty good on IOS, but absolute garbage on Android.

Where do I start looking for where to tweak? Is it fixable in the CSS?

Should I just say screw it and install a plugin that might magically solve this?

nav {
                position: fixed;
                background-color: #333;
                overflow: hidden;
                height: 15%;
                border-radius: 3%;
                width: 98%;
                padding-left: 0.7%;
            }

I set the border-radius to 3% and the corners are weird and half curved. This doesn't happen if I use pixel measurements.

I made a paragraph tag and gave it a class and then gave text decoration(line through) in the style sheet when i run the code only the text comes but not the line through but when i copy the same code and paste on a new file it works.

For eg:

<div class="outer">

<div class="inner1"> </div>

<div class="absolute inner2"> </div>

</div>

in the code if inner1 div has height of 50px ; inner2 div height: 100px , and only one appears inside the outer div at a time, how to dynamically change the size/height of outer div , and it should be expanding from the top of outer div (not bottom)

If anyone could throw some light on this , thanks

I’m using React and CSS @media queries for responsive design, but when I zoom in (e.g., to 250%) on my laptop using Ctrl and +, the browser mistakenly applies mobile styles due to the reduced viewport width, breaking the layout. I need a way for media queries to apply based on actual screen size, not zoom level, so that desktop, tablet, and mobile styles render correctly regardless of zoom. Looking for guidance on solutions to prevent media queries from responding to zoom changes.

Making a social media link page and I was adding a tags to the h1 tags in the html. I added a styles in the CSS so it still kept the original h1 styling in the CSS. At first they all worked well. I don't know what I did, but now its like my h1 tag doesn't have the a element CSS styling anymore. It just shows the h1 CSS styles, but not the a and :hover styles. And its only for this element. I have a h2 and h3 and they work completely fine, but h1 is causing me a lot of trouble. Maybe while I was testing the links it got overridden?

imgur

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="video-container">
        <video id="youtube" src="./nature.mp4" muted loop autoplay>
        </video>
        <h1 id="myH1"><a href="https://www.youtube.com/">Youtube</a></h1>
        <video id="soundcloud" src="./mountains.mp4" muted loop autoplay></video>
        <h2 id="myH2"><a href="https://soundcloud.com/discover">Soundcloud</a></h2>
        <video id="tiktok" src="./social.mp4" muted loop autoplay></video>
        <h3 id="myH3"><a href="https://www.tiktok.com/en/">TikTok</a></h3>
    </div>
    <div class="controller">
        <button class="play-button" type="button"></button>
        <button class="play-button2" type="button"></button>
        <button class="play-button3" type="button"></button>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS:

.video-container{
    height: 100%;
    width: 100%;
}
#youtube{
    position: absolute;
    top: -500px;
    left: 0px;
    height: auto;
    max-width: max-content;
    object-fit: cover;
}
#soundcloud{
    position: absolute;
    top: 580px;
    left: 0px;
    height: auto;
    max-width: max-content;
    object-fit: cover;
}
#tiktok{
    position: absolute;
    top: 1300px;
    left: 0px;
    display: block;
    overflow: hidden;
    height: 1080px;
    max-width: max-content;
    object-fit: cover;
}
#myH1{
    opacity: 0.5;
    color: white;
    text-align: center;
    position: absolute;
    top: 220px;
    left: 950px;
    right: 0px;
    bottom: 0px;
    max-width: max-content;
    font-size: 2rem;
    cursor: pointer;
}
#myH2{
    opacity: 0.5;
    color: white;
    text-align: center;
    position: absolute;
    top: 900px;
    left: 950px;
    right: 0px;
    bottom: 0px;
    max-width: max-content;
    font-size: 2rem;
    cursor: pointer;
}
#myH3{
    opacity: 0.5;
    color: white;
    text-align: center;
    position: absolute;
    top: 1850px;
    left: 950px;
    right: 0px;
    bottom: 0px;
    max-width: max-content;
    font-size: 2rem;
    cursor: pointer;
}
a{
    color: inherit;
    text-decoration: none;
}
#myH1:hover{
    color: red;
    text-decoration: underline;
    height: 0px;
}
#myH2:hover{
    color: aqua;
    text-decoration: underline;
}
#myH3:hover{
    color: black;
    text-decoration: underline;
}

.controller {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0. 0.5);
}
.play-button{
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(50%, 50%);
    width: 72px;
    height: 72px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}
.play-button2{
    position: absolute;
    left: 0%;
    top: 130%;
    transform: translate(50%, 50%);
    width: 72px;
    height: 72px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}
.play-button3{
    position: absolute;
    left: 0%;
    top: 250%;
    transform: translate(50%, 50%);
    width: 72px;
    height: 72px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}
.play-button::before,
.play-button::after,
.play-button2::before,
.play-button2::after,
.play-button3::before,
.play-button3::after {
    content: '';
    position: absolute;
    top: 36px;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top-color:  transparent;
    border-bottom-color: transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-style: solid;
}
.play-button::before,
.play-button2::before,
.play-button3::before {
    right: 34px;
    height: 35px;
    border-width: 0 0 0 10px;
}
.play-button.play::before,
.play-button2.play::before,
.play-button3.play::before {
    right: 20px;
    height: 14px;
    border-width: 14px 0 14px 28px;
}
.play-button::after,
.play-button2::after,
.play-button3::after {
    left: 44px;
    height: 35px;
    border-width: 0 0px 0 10px;
}
.play-button.play::after,
.play-button2.play::after,
.play-button3.play::after{
    left: 52px;
    height: 0;
    border-width: 7px 0 7px 14px;
}

JS:

const playButtons = document.querySelectorAll("button.play-button, button.play-button2, button.play-button3");
playButtons.forEach(button => {
    button.addEventListener("click", () => {
        button.classList.toggle("play");
    });
});

I get the general idea of CSS to kinda know what I'm doing, but I'm at my wits end. I can't seem to find any posts with a similar issue. Square or portrait photos seems to scale down fine, but for some reason landscape photos get super compressed. Also bonus points if there is an option to center the landscape thumbnails. Any help would be greatly appreciated.

This is my current settings.

Example: https://i.imgur.com/U5UA7jl.png

.thumbnail {

width: 120px;
border-radius: 70px;

}

.link .thumbnail img {

height:120px;
width:auto;

}

Subreddit is /r/Orianna.

I have a header I want to change the color from Black to blue from desktop to mobile.

the CSS class is labeled as headercolor1

the code is:

/* Desktop header font color */

.headercolor1 {

color: #000000 !important;

}

/* Mobile header font color */

@ media(max-width: 768px) {

.headercolor1 {

color: #6FA8DC !important ;

}

}

how ever it doesn't work. would love some help. Edit : there is no space between @ and media in the actual code . Had to add the space for Reddit .

Thank you

I have a site that is nothing but a background image and I prefer to keep it that way, but I want visitors to have the ability to contact via email. Is it possible?

I have a radio show with a tabled playlist. https://wfmu.org/playlists/shows/132887 I can't edit the original stylesheet, but I can add my own.

I added the following to the stylesheet to make the images fill the width of the column:

a.highslide img {
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    height: max-content !important;
    display: block;
}


a.highslide-gallery ul li {
    float: center;
    width: auto !important;
    height: auto !important;
}

but in doing so, the resized images look like shit. It's the proper aspect ratio, and the original images are larger than the table cell. I don't know why it looks so crap. The gifs are fine, but the jpegs look awful.

Why?!?!

focusing only on the yellow boxes in the image, I am a bit lost on how to get the div in the 2nd column to move under the other 3 divs when the browser is less than XXX pixels.

since I can't include it here, the image: https://f.io/Q_MKDQW1

I am trying to fix a bug in a Piwigo theme for my benschumin.com site by using some custom CSS to override the template's standard design for the search box. The issue that I'm trying to rectify is that the search box text is white, which looks fine on desktop, where the search box has a dark background, but on mobile, the search box is white, which ends up creating white-on-white, i.e. totally unreadable. Here's what I came up with myself:

#navbar-menubar > #quicksearch input[type="text"] {
color: #000000;
}

That changes the color of the text in the search bar to black, which looks fine on mobile, but that also changed the text on desktop to black, which means that it's now black on dark gray. Not completely unreadable, but not desirable, either.

I looked on Google to see if I could figure out how to use the "@media content mobile" language in an attempt to rectify this, but I could not figure out how to apply that to my specific situation. Ultimately, the goal is black text in the search box on mobile, and no change from default for desktop. Any idea?

Hi all, I just stumbled upon the nav bar hover effect and I’m looking for various designs, So can anyone please help me in finding syntaxes for all the designs or perhaps a GitHub repository that contains all the designs in it