Help for reddit's CSS

hi why the top margin between the child and the container does not work pls help

2023-01-27T11:38:07+00:00

https://codepen.io/ali-sabah/pen/RwBJKjb

pen code link

<body>
<div class="p">
<div class="c">child</div>
</div>

p {
background-color: #eee;
width: 250px;
height: 100px;
}
.c {
background-color: blue;
height: 20px;
margin: 10px;
}

submitted by /u/Ali26700
[link] [comments]

hi i have some questions pls help?

2023-01-27T10:45:10+00:00

1-when i give children margin-top=10px; the parent move also and the children will stay in the same place and will not move

submitted by /u/Ali26700
[link] [comments]

Need help fitting my Footer

2023-01-27T03:29:24+00:00

I'm learning how to use grid but have a quick question. With the footer it will do what I want when it's full screen. But when I use half a screen things get kinda out of place. I have to scroll down. Is it because my article is to big so it forces it down more? Or is there a way to display it without having to scroll down?

HTML

<div class="container">

<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="nav">Nav</div>
<div class="article">Article
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p>
<p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="footer">Footer</div>

css

body, html {

height: 100%; margin: 0; }

.container { text-align: center; height: 100%; padding: 16px; box-sizing: border-box; }

.container div { padding: 15px; font-size: 32px; font-family: Helvetica; font-weight: bold; color: white; border-radius: 15px; }

.header { background-color: #FFDE22; }

.sidebar { background-color: #FF7755; }

.nav { background-color: #00DDFF; }

.article { background-color: #bccbde; }

.article p { font-size: 18px; font-family: sans-serif; color: white; text-align: left; }

.footer { background-color: #393f4d; }

.container {

display:grid; gap: 0.5em; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "header header header" "sidebar nav nav" "sidebar article article" "footer footer footer"

}

.header {grid-area: header;} .sidebar {grid-area: sidebar;} .nav {grid-area: nav} .article {grid-area: article;} .footer {grid-area: footer;}

u/media (max-width: 50em) { .container { grid-template-areas: "header header header" "sidebar nav nav" "article article article" "footer footer footer" } }

I got the layout I want but I want my footer to not scroll down. Is it just the font size that messing it up?

submitted by /u/Imscubbabish
[link] [comments]

how to remove this white space?

2023-01-26T22:18:12+00:00

I updated my wordpress website the other day and now I'm seeing a white space added above thumbnail images for some reason.

https://imgur.com/cP1oeyW

I tried the following code. . .

.wc-block-grid__product-image {

`padding-top: 0px !important;`

}

but it doesn't seem to do anything. If i change that to 100px then I do see that white space being extended. . .but setting this to 0px doesn't seem to remove the white space at all

website is located here - https://playstorefinder.com/

submitted by /u/Endda
[link] [comments]

Using a a reoccurring DIV across multiple pages?

2023-01-26T20:54:59+00:00

I apologize in advance for not communicating this problem correctly - but here goes. I have piece of HTML code that I have to repeat over and over again. Typically - I'd just copy the code - however this time the code is going to change from time to time - so I'm wondering if I could simply create a DIV that hosts the code and then update the CSS once rather then update 4500+ pages. The code is relatively simple - but I'm very new to CSS and so I don't really know what to do with it.

Here's an example of the code I would be repeating:

<ul class="Resources"> <li><a href="/333/">333</a></li> <li><a href="/444/">444</a></li> <li><a href="/555/">555</a></li> </ul>

So is it even possible?

submitted by /u/Seedthrowr
[link] [comments]

Advice on recreating HUMBLE BRAG section

2023-01-26T22:12:38+00:00

Hello,

Does any one have an idea or has a direction to point me to to recreate or just understand how the HUMBLE BRAG section works from this website?
https://www.ethansuero.com/

submitted by /u/angelo_mab
[link] [comments]

A recipe card and flip animation CSS, need help

2023-01-25T17:50:09+00:00

https://glitch.com/~super-recipe-card

I'm building a good modern recipe card design for my homework. It spends me 5-6 hours.

Any suggestions? I want more evaluation to improve my design.

I'm new to the design field but I'm familiar with CSS.

I'm not satisfied with the flipping animation now because it is not very natural somehow. But I have no idea how to improve or what I want.

submitted by /u/Morty137_Space
[link] [comments]

How do i change the color of big horizontal white stripe underneath subreddit name? /r/roadcam

2023-01-25T16:46:03+00:00

Just made a new banner and background for r/roadcam and now i am stuck with this white stripe, that is kinda out of place. Your helpful advice will be much appreciated.
https://i.imgur.com/a0uQQi7.png

submitted by /u/tulpan
[link] [comments]

Multiple Images in One Area??

2023-01-25T04:50:52+00:00

submitted by /u/ilovespacehey
[link] [comments]

Responsive Picture in CSS

2023-01-24T10:37:29+00:00

Hello! Im working on a website and have a picture in the header. When the screen is big I want the whole picture showing, but as the screen size is getting smaller I want a specific part of the picture to show. Im not sure how to do this in CSS and would be so happy if someone could help me.

submitted by /u/englajanze
[link] [comments]

How to fix this background:linear-gradient issue?

2023-01-24T00:20:43+00:00

Hello guys, maybe someone can help me. I'm using the following CSS for my site background:

body {background:linear-gradient(to bottom right, rgba(0,0,0,1) 0%, rgba(58,1,40,1) 100%);}

It works great, but I notice that have a little issue with my iPhone 13 Pro Max when I visit the site horizontally, it shows a blank space on the left and right side. Screenshot: https://prnt.sc/yXZC5dF7m-EI

This doesn't happen when I use a background image, for example:

background: #0e0301 url("https://domain.com/image.jpg") fixed center top;

But I don't want to use the image, I want to use the linear-gradient. Any idea how to fix this?

This is the (NSFW) site URL if you want to test it: https://bestlistofporn.com

Thank you in advance :)

submitted by /u/luistimmy
[link] [comments]

Question: Why this CSS behaves differently in wide window and mobile window

2023-01-23T17:05:14+00:00

Hello, I have a question about CSS behavior.

<!DOCTYPE html> <html> <head></head> <body> <p style="line-height: 1em; margin: 1em; background: rgba(0, 0, 0, 0.1);"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccc ddddddddddddddddddddddddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </p> <p style="line-height: 2em; margin: 1em; background: rgba(0, 0, 0, 0.1);"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccc ddddddddddddddddddddddddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </p> <p style="line-height: 2; margin: 1em; background: rgba(0, 0, 0, 0.1);"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccc ddddddddddddddddddddddddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </p> </body> </html>

The second and third paragraphs look the same in wide windows, Chrome in Windows for example.

But once I change the browser to mobile mode, they look different.

Why?

Images: https://twitter.com/_kjot/status/1555282986782040064?s=20&t=I49qTffVXZc_ZhTdj2u6VQ

In my understanding, both 2em and 2 mean twice of the default font size. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

submitted by /u/_kjot
[link] [comments]

Enhancer for Youtube CSS help

2023-01-23T00:59:08+00:00

Hi! Is there a way to change the color of the buttons in the Enhancer for YouTube browser extension? I'm not a programmer or developer or anything so most of my css code is borrowed. Going for a peaches and cream theme, so I was hoping to make them a dark orange color instead of the grey they are now.

This is what's supposed to help with the color: Custom Theme CSS of "Enhancer For YouTube" ($2078210) · Snippets · Snippets · GitLab but using it doesn't do anything and leaves the buttons the same color. Are they just not editable? Would love any help on this ^w^

submitted by /u/pipermaru_
[link] [comments]

Background Image being shifted 40 pixels left on phone browsers but not on PC browsers?

2023-01-22T23:38:57+00:00

In a simple web-based game I'm developing, I have a div with a background image (a map) and a variety of game pieces that are arranged (via divs with position: absolute) on that image. On every computer regardless of browser type, the page is rendered exactly as I would expect. But on any phone of any kind regardless of screen size, the background image is shifted 40 pixels to the left, and I have no idea why. (see links for pics)

The problem is probably some goofy line of CSS I've messed up, but can anyone think of a reason a background image would be shifted like that on a phone browser but not on a PC?

Thanks!

submitted by /u/CaptainAbraham82
[link] [comments]

my card info is staking ontop of each other in one card, why cant i get seperate cards to display in a 3 column grid? please help

2023-01-22T01:27:37+00:00

I'm developing an angular app and my css skills suck. I'm printing my cards out from my db.json file and its printing onto my landing page. heres my css

/* Grid container */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 10px; } /* Grid items */ .grid-item { width: 500px; height: 500px; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.8); } /* Image */ img { max-width: 100%; max-height: 100%; } .landing-page-title{ color:black; position: absolute; top: 14%; left: 64%; width: 15%; font-size: 2.3rem; } .card-container { display: flex; justify-content: center; margin-top: 60px; } .card { position: absolute; width: 100px; height: 530px; margin: 0px; padding: 0px; top: 22%; left: 56%; min-width: 150px; max-width: 500px; width: 100%; } .card-content { margin:5px; padding:5px; text-align:center; color: black; margin-block-start: 0.5em !important; margin-block-end: 0.5em !important; }

If sombody can please tell me what i'm doing wrong I would LOVE YOU LONG TIME!!!!!

I have'nt loaded my images yet but the data just prints over itself all on one freakin card. heres my html

<app-header></app-header> <div *ngIf="defaultView"> <div class="landing-page"> <div class="landing-page-content"> <img class="landing-page" src="../../assets/wallpaper/homemade.jpg"> <h3 class="landing-page-title">My Tasty Menu</h3> <div class="grid-container"> <div class="card-container"> <div class="card" *ngFor="let item of items"> <div class="card-content"> <h4>{{item.name}}</h4> <br> <h6>{{item.price}}</h6> </div> </div> </div> </div> </div> </div> </div> <div *ngIf="!defaultView"> <!-- Other Views Content --> </div>

Plese Help Me Before I eat my own toe nails out of frustration

submitted by /u/DaCosmicOne
[link] [comments]

Tricky Positioning Problem - Need CSS Magic!!

2023-01-21T23:38:55+00:00

Hi everyone,

I need your help! I have a tricky situation with two buttons that I need to be next to each other in one line and also at the end of the container. The problem is, that the buttons are wrapped in divs and I can't edit the html to wrap those divs into a shared parent container. Which leaves me to force them next to each other with the power of css.

Codepen: https://codepen.io/aki-sol/pen/Expoqxy

I haven't found a robust way to do that yet. One concern I also have with forcing them next to each other with position absolute is that depending on what language the page is displayed in the button lengths vary, which makes it difficult to figure out an absolute position for both.

I would GREATLY appreciate any help and guidance!

submitted by /u/slowsad
[link] [comments]

Bootstrap and asp.net web application

2023-01-21T05:49:33+00:00

Having a helluva time trying to apply height:100vh to the <body> tag of this thing. If anyone knows what the issue is I'll love you long time.

submitted by /u/onesmellyspurgus
[link] [comments]

Please help me fix this icon alignment

2023-01-20T08:39:53+00:00

Hello guys! Can someone please help me fix this icon before the category title?

URL: https://bestlistofporn.com/top-sex-cam-sites

Note: NSFW

I need to align this icon with the category title:

https://prnt.sc/Lwfyu6JBvm6g

I have to go down the icon a little bit or go up the category title next to the icon.

I tried everything (of my knowledge) but without success, I'm kind of a newbie :)

Thank you in advance!

submitted by /u/luistimmy
[link] [comments]

Aligning Links at ends of columns

2023-01-19T21:43:37+00:00

Hello all -

I'm having trouble figuring out the best way to align my "learn more" links at the end of columns and keep them responsive so there's no screen size where links in the same row are not on the same line.

I've tried with both flex and grid and can't seem to figure it out. I've set up the code from my section in a pen here: https://codepen.io/shabobble/pen/JjBOQRG.

I'm looking for an effect like the "Contact Sales" buttons on Pantheon.io (https://pantheon.io/plans/pricing), but even theirs do not stay aligned when you start shrinking the screen.

submitted by /u/shabobble
[link] [comments]

Help with my club's logo

2023-01-19T00:48:28+00:00

http://gimseil.no

Hello /csshelp!
I am trying to get my club's badge (top left) to sort of dip a bit below the white navbar, and have managed that - in a way.
What I am trying for is something like this
What I've got so far though, is this

I have achieved that by making a .SVG logo with transparent background, and adding some padding to the top by this custom css:

.style-dark .navbar-brand .logo-skinnable > * {

margin-top: 20px;

}

This, however, makes the entire navbar thicker (taller) than what I want. How can I keep the navbar slim while still offsetting the logo a bit below?

submitted by /u/vetlemakt
[link] [comments]

Responsive Concentric Circular Diagram

2023-01-18T20:33:27+00:00

Hello -

I'm trying to create a circle of eleven circles around a center circle with arrows pointing out from the center circle at each of the eleven outer circles, and also have it be responsive. I've done a lot of Googling and managed to create the circle of circles around a center circle in a few different ways, but where I'm having trouble is creating the arrows in such a way so that they can be resized on smaller screens to still be pointing at the correct circles.

Something like this JSFiddle (https://jsfiddle.net/ItayGrudev/3jqryc1m/) or this CodePen (https://codepen.io/KittyGiraudel/pen/vEJXGm) [neither of these are mine], but I need arrows pointing out from the center at the outer circles.

submitted by /u/shabobble
[link] [comments]

Responsive Help

2023-01-18T14:07:39+00:00

I'm in the process of making sure that the elements of the website I'm working on are responsive, and I'm noticing that as I shrink the dimensions in Chrome Dev Tools, at a certain breakpoint the entire <html> element begins to shrink towards the left and it's not taking up the full width of the window. I've checked through all the elements for some stray margin that may be causing issues, but there isn't one. It seems like the issue might be related to some element or another being too large, as when I put a display: none on some elements that seem to be extending outside of the area highlighted by the <html> element, then the screen dimensions can go smaller before the shrinkage starts again, but it still does happen.

I fear I'm missing something obvious. Here's an example of what I'm looking at. I can share more specific pictures as needed.

https://imgur.com/uERD2Vg

submitted by /u/shabobble
[link] [comments]

How to fix this responsive issue?

2023-01-18T12:45:20+00:00

Can someone please help me fix this responsive issue?

URL: https://bestlistofporn.com/discounts

IMPORTANT: ADULT CONTENT

Desktop looks fine: https://prnt.sc/R-eAqZ2ut7ZG

But not on some devices.

Tablet: https://prnt.sc/Ssyh8WL4TIy8

Mobile: https://prnt.sc/V2tI2bGlzMJb

What's the best way to fix this issue? Or at least, centering the content.

Thank you in advance, guys!

submitted by /u/luistimmy
[link] [comments]

Trying to create a white-overlap, over the bottom of a header-image - to display the page's H1

2023-01-18T12:40:42+00:00

Hi all,

We're moving from M1 to M2, and our guide pages have lost a load of styling in the process.

I want to create a "lip" or "overlap" so that people can immediately see the page H1 above the fold when landing on the page.

I'm pretty new to CSS and HTML.

Draft 1 - I attempted stealing our existing code using inspect element, but the background colour isn't working:https://codepen.io/drew-campbell-griffiths/pen/VwBMoGO
Draft 2 - This is one I attempted myself, but few issues with it![https://codepen.io/drew-campbell-griffiths/pen/wvxrVpM](https://codepen.io/drew-campbell-griffiths/pen/wvxrVpM)

Any ideas why draft 1 isn't showing a white background please?

It should look like this on desktop- (just not quite as big ! (pls scroll down to see the overlap)

Thank you!

submitted by /u/AnxiousMMA
[link] [comments]

I want to remove/hide a button that I think is also an element. How do I execute this with CSS?

2023-01-18T01:45:58+00:00

Disclaimer, I don't know any formal CSS or html vocabulary, sorry.

I know that I want to hide a button so that it's removed from the document, and what needs to be done to achieve this. I just don't know how to execute it. Here are the details:

Inside of an unordered list class titled "navigation actions" (which presents as a horizontal row of buttons), I want to edit ONLY the final list item element (the fifth and final button) so that the element style property is set to display: none. I know this would hide the button because I tested it using web inspector and was successful.

My issue comes down to formatting the CSS. I can only manage to hide the entire list/row of buttons, not the specific button/list item. Here is my weak attempt that never stood a chance at working:

#main

.user.home.profile,

navigation.actions: type(5)element.style {

display: none;

}

Here's the "Full XPath": /html/body/div[1]/div[2]/div[2]/div[2]/ul/li[5]/a

Here's the "JS Path": document.querySelector("#main > div.user.home.profile > ul > li:nth-child(5) > a")

These "Paths" don't mean anything to me, but maybe they can help clarify. I hope this is coherent.

submitted by /u/lizard_69yourmom
[link] [comments]