deepintotheforest

hi again! this is more of a general html/css question, but it has to work within dreamwidth's constraints, so i decided to ask it here. please let me know if this isn't the appropriate comm for this. i hope i used the right tags for this post.

here's what i'm trying to achieve (this would be displayed inside the most recent entry on my journal, so i can use regular CSS and not just inline, in case this matters):

i want to have a big box, and inside it a picture and a small box below that. i want the big box to resize responsively while keeping its proportions: suppose its width:height ratio is 1:2; i want it to keep that ratio always. as it resizes, i want the picture and small box inside to also resize while also keeping their proportions.

normally this would be really easy to do with aspect-ratio (<- this is a link to mozilla's developer resources) but that property doesn't seem to work on dreamwidth -- when i put it in my custom CSS, it doesn't seem to do anything, and it gets highlighted in red. (it works okay when i try it in online CSS editors, so i think it's not my mistake that's causing this.)

assuming this is true and i can't use aspect-ratio on DW, i need to cobble together some other solution, but i'm completely out of ideas. is this possible to achieve without aspect-ratio, or should i just change my idea to something that can be done on DW?

thanks again for your time!

i was able to fix the problem i was having by removing the

.module-content .userpic {
	position: relative;
	left: 280px;
	bottom: -65px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	border-style: solid;
}

problem i was having

hello! i'm back again~ working on another thing, and having issues with the module userpic and hiding it or moving it, essentially. i was able to move where i want the contents of the module userpic to be displayed and how i want the module content to be displayed, but i'm still having the issue of it showing up at the center and top, with the border.

you can view the live version at

testerjournal, and the image here. as you can see, or hover over the circle at the top it still shows as if the module userpic is up there which i don't want it to do.

module coding is here, and i can't figure out how to fix this

eta: using tabula rasa, plain

/* secondary */

#secondary {
font: 'Montserrat', sans-serif, #33343F, 7px;
background: #transparent;
width: 607px;
}

#secondary > .inner:first-child {
background: transparent;
padding: 0;
width: 500px;
text-align:right;
}

.module-wrapper {
padding: 10px;
}

.module-content li {
margin: 0;
}

ul.module-list {
list-style: none;
margin: 0;
padding: 0;
text-transform: lowercase;
font-color: #ffffff;
}

.module-navlinks {
	font-family: Montserrat;
	font-size: 9px;
	position: relative;
	left: 75px;
	bottom: -40px;
	font-color: red;
	text-shadow: 0.5px 0.5px 0.5px #D7D9D7;
}

.module-navlinks:hover {
	font-family: Montserrat;
	font-size: 9px;
	position: relative;
	left: 75px;
	bottom: -40px;
	font-color: red;
	text-shadow: 0.5px 0.5px 0.5px #D7D9D7;
}

.module-list li {
margin: 0 .0 0;
display: inline-block;
font-size: 30px;
font-color: ;
}

div.journal-name {
	font-family: Sour Gummy;
	font-size:40px;
	display:inline-block;
	position: relative;
	left: -10px;
	bottom: -80px;
	font-color: #fff;
}

.module-content .userpic {
	position: relative;
	left: 280px;
	bottom: -65px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	border-style: solid;
}

.module-content .userpic img {
	position: relative;
	left: 280px;
	bottom: -65px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	border-style: solid;
}

.module-customtext {
text-transform: lowercase;
font-size: .8rem;
margin: .8em 0 .8em 0;
}

S	M	T	W	T	F	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Where the Wild Things Aren't

dew on moss

Reading

resizing while keeping proportions without using aspect-ratio

[solved] moving around the module content or hiding it!

Profile

April 2021

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags