I'm having some issues aligning text in the webpage I am making. In the biography section I want the heading text to be to the right of the image and the paragraph text to be under it and any of the paragraph text that goes below the image to wrap around the bottom of it. Same for the upcoming events section except it won't need to wrap around the bottom of the image. No matter what I have tried either the paragraph text isn't under the heading text, or the image moves above both of them and the text is just below the image. Any help would be appreciated! https://zvolmer.github.io/wdd130b/Personal%20Site/index.html

https://matiasnavarrete117.github.io/webwiskas.github.io/index.html#

How do I fix that position changes when scrolling to the end and to the top again

I am a bit confused when I do,

@media only screen and (min-device-width: 480px){} mobile
@media only screen and (min-device-width: 760px){} tablet

I have a responsive desktop version so far. Do I need to refine each element in the css file i targeted for each version? it is a lot to do. I was curious the best way to go about it.

Right now I am doing the mobile version and just resizing every element as needed

Hi, having some issues with my site https://frcanotes.com, looking for some help.

Fairly noob website designer so please bear that in mind!

For the header section, I want:

• The whole header section to be a purple box
• The website title to be centred horizontally within said box
• The breadcrumb navigation to lie under the title, aligned to the left
• There be enough space for the breadcrumbs to extend rightward
• A horizontal line <hr> under the purple box before the main content

Currently this is coded within <header> as:

 <div class="top_bar">
  <div class="logo_title">
    <p> FRCA Notes</p>
   </div>

   <div class="header_left">
    <ul class="breadcrumb">
      <li><a href="./index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
    </div>
  </div>
  <hr>

The associated CSS is:

.top_bar {
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    margin-top: 0px;
    color: #2C1951;
    background-color: #ede7f8;
}

.logo_title {
    padding: 5px;
    text-align: center;
    margin:auto;
    color: #2C1951;
    font-size: 30px;
    font-family: Verdana;
}

.header_left {
    padding:2px;
    text-align: left;
    margin:auto;
}

It's coming out extremely wonky and not at all right. Any help would be much appreciated, ta.

Hi Everyone.

im trying to hide some text using css code. There are 2 other parts of text on the form that i have managed to hide using the code that was give on the forum of the associated plugin,

so the text i want to hide is "Forgot Password"
on this site: https://handaprivateclients.com

i have tried this css code below, but to no avail..

.eMember_fancy_login_8 #forgot_pass {

display: none;

}

Many Thanks to anyone that can help...

Hello,

I'm the head moderator over on /r/PTCGP - The main Pokemon TCG Pocket subreddit for the game. We're nearing 200K members, and a few thousand of them still utilize Old Reddit.

I was curious if anyone can help, or point me in the right direction of somebody who could help us create a better looking design for it. I have about zero knowledge in CSS work.

If possible, something like what /r/Hearthstone has would be great.

I don't know what we could offer besides some thanks, amd/or an honorary spot on the Mod. Team, but we can discuss more if needed. I'm new to making this kind of request, so apologies in advance.

this is a great obsidian css but it has a problem when you scroll down the folder colors change can any one fix it so the colors do not change when you scroll down | https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/File%20explorer%20styling%20-%20Rainbow%20folder%20background.md

::SOLVED::

Hello! I'm looking for a solution for this design issue. Is there a way to the "select options" button to always be at the same level instead of the way it is. Its not even because the description is longer on the one product. T

he link below is to an image that I included in another post about this issue. Someone responded that it can be fixed with css, but didn't offer any additional details.

I'm using wordpress, elementor and woocommerce

Can someone help me get this fixed up?

https://preview.redd.it/add-to-cart-buttons-uneven-due-to-item-name-length-v0-luu4bqdibe2e1.png?width=1068&format=png&auto=webp&s=873a51f653cea5ed092a8ca54c3e6f364b37b5c8

The address is https://bowsbyhaley.com/product-category/lots-of-curlz-dog-bows/

I'm looking to grab a CSS theme that was out there, and it looks like r/themes closed. What happened? Any other resources I can use?

Hi friends, ive made my site with 150% zoom on my browser, because thats what i use by default. And as soon as i saw someting was wrong i tryed to zoom back to 100% and it looks bad :D

I mainly use rem and vh / vw to position everything.
In particular im confused by whats happening with a list here, its a div (flex column) with a bunch of <a> . When im zoomed the list just gets cut off at the top.

My page Zoomed Out Alot: pasteboard (dot) co/dt3bivmrgrxg.png
My page Zoomed Normaly (aka. 150%): pasteboard (dot) co/PoTE30vFgNqD.png

The code for the list: pastebin (dot) com/4EM8zHg2

Also ... i just noticed that the border shrinks when zooming out, is this because i use rem for it. Is rem a bad measurment to use by default?

Hello, all!

I am currently trying to do a project on TOP (Sing-up Form). I realized when I zoom in and zoom out on my page, the logo and the text on the background image change their size and positions. Can you some tell me what causes this and how can I fix it?

I provide my codepen below:

https://codepen.io/albert9191/pen/OJKKvyO

video: https://streamable.com/7kxswu

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.