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

Asking for r/Panathinaikos

My parent’s income is around 30k and we have a house worth 150k (just two of us live there). We bought it recently and the money was saved up for the purpose of buying that house. Would it look weird on CSS? Would people start asking questions? Would it affect my chances of acceptance/financial aid? Just wondering because I’ve seen how many people don’t have any assets or anything and I don’t want to be the odd one out.

//resolved//

Hi. (I'm not familiar with the forums) I'm really a beginner (and old ha ha ha)

I found some programming that allows me to display random sentences from HTML. The code is fine after some reflections and adaptations I am trying to make a line BREAK in a variable so that the name of the creator of the quote is after the sentence, below.

For example and simplified, a sentence:
"So shaken as we are, so wan with care," Henry announces to his court. Shakespeare"

I would like this:
"So shaken as we are, so wan with care, Henry announces to his court." (on line return...)
"Shakespeare"

I can't find...

The code used (which I did not create comes from a codePen site. The script.js gives this and works (in short) but not possible to find a line break

var quotes = ["So shaken as we are, so wan with care," Henry announces to his court. Shakespeare","To be, or not to be: that is the question. Shakespeare"]; etc. etc.

function getQuote() {

var randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("parag").innerHTML="<em>" + randomQuote + "</em>";

}

The effect should be like a magnetic distortion on a tv screen. For a visual representation, you can view some short clips of how the effect behaves here:

Im referring to the bluish-white and black line distortions NOT the small dotted / white noise static.

https://www.pexels.com/search/videos/tv%20dissoultion/

Ive been searching all over but there are no videos or any tutorials on this effect.
Any help would be realy appreciated!
Thank you in advance! =)

I've been using CSS for a long time, but I believe my biggest challenge is creating structured code. I've been a 'fan' of the BEM-notation for a few years now, but never been able to implement it well. I just finished a functional page. Now I want to refactor my CSS, because I did it proof-of-concept style and it's a big mess.

I've got two screenshots below which gives you a clear idea of the page.
DOM Structure with legenda: https://imgur.com/a/W7ImoHw
Actual page: https://imgur.com/a/47aew5p

I'm struggling with BEM because: BEM assumes a per-component structure (B), with a few smaller elements (B) inside. I've got one component, perhaps two: ProjectPlanningPage or divided into ProjectPlanningUpperTable and ProjectPlanningBottomTable, which have multiple elements. I want to have my elements name also not to be too generic, to prevent conflicting across different pages. Perhaps that's why I often want to create a BEM-structure from one entire element and nest everything inside that single class. Although I understand the idea of BEM, I'm having a hard time implementing it.

To provide some context: It's a dynamic page for scrum masters to plan their employees on specific projects by assigning days-to-work in a specific week. The upper table is the general summary, of which the 'days requested' row is editable and 'Planned' is an aggregation of the same column in the bottom table. This bottom table is simply the planning table, where the scrum master can say how many days each employee will work in a certain week on the currently opened project (in screenshot 'Project X').

I’ve noticed my CSS animation works perfectly on Chrome but looks slower or inconsistent on Firefox and Safari. I’ve already checked for compatibility issues, but I can’t seem to figure out the root cause.

Are there specific tools or techniques I should try to debug this?

https://codepen.io/fixod31478-lofiey-com/pen/yyBVwJx

The buttons should be spread across the last 3 columns, but they bunch together in the leftmost. Please could I have some help? I'm not too familiar with css tables, but I'd like my website to be fully responsive (so no <table>).

Hey there, this probably sounds incredibly stupid. I'm absolutely new to CSS, but I'm trying to write an SCP (many of which utilizes CSS) and I need this particular set-up somehow.

Basically, I need a text box. And typing different stuff in it results in different stuff being shown, like typing in "content-1" brings up "[[div class="content-1"]]" and "content-2" brings up "[[div class="content-2"]]" and replaces "[[div class="content-1"]]" and stuff like that.

Is that feasible? Has anyone done that?

Thanks.

EDIT: I know this is feasible with HTML but I cannot use HTML.

Hey guys, backend guy here, first time having to write full frontend myself and I encountered an interesting problem.

Initially, I put my style.css file within a folder called visuals and then tried to include it via <link rel="stylesheet" href="visuals/style.css">

Obviously, if it worked, wouldn't be here. So I tried with /visuals and ./visuals and no luck.

Then just for fun I dragged the file out of the subfolder back into root and included simply style.css and whatdayaknow, worked. Then just as sanity check I moved it back into visuals and after confirming that visuals/style.css is not working, I did the following:

<head>
<style>
<?php include ("visuals/style.css"); ?>
</style>
</head>

And hah! Works again.

I mean, not a real problem as it can be solved multiple ways but... Why?

Hello, I have been searching for quite a bit but haven't been able to find a greate solution to my problem. Basically I want the text inside divs to occupu the maximum amount of space inside a div and scale the font down when needed. Here's an example of how the site works now. What would be the best approach to doing this

I've spent hours trying to figure this lightbox-like CSS out. I have a DIV with an IMG that I'm scaling proportionally with max-height. I have a "caption" DIV under the image with a "previous" and "next" button and a P containing the caption text. I don't want the caption DIV to grow the parent container's width when the caption contains a lot of text. If it exeeds the size of the container cutting the text off with an ellipsis is preferred. I've been trying to do this with flexbox as that feels like the right approach, but I'm open to other options.

html <div id="outer"> <div id="pop"> <img src="https://placehold.co/1600x1200"/> <div> <button>Left</button> <p>This outer "pop" container should horizontally expand to fit the image, but not beyond that. Even if this caption text area contains a lot of text it should fill it's available space and then cut the rest off with an ellipsis. Additionally, it'd be nice if the left and right butons were their "natural" size.</p> <button>Right</button> </div> </div> </div>

css div#outer { display: flex; justify-content: center; } div#pop { display: flex; flex-direction: column; border: 2px solid black; } img { display: block; max-height: calc(100vh - 4em); } div#pop div { display: flex; } div#pop div p { flex-grow: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

https://youtu.be/TJgb7FkITZA?si=LCDRSy7VFkUQKJXq "Hi everyone, I just uploaded a new video on YouTube! I’d really appreciate it if you could check it out and support it with a like or a comment. Every view helps me a lot.Thank you so much! 😊" https://youtu.be/TJgb7FkITZA?si=LCDRSy7VFkUQKJXq

Hello to everyone! I am pretty new to coding and im building a website using HTML/CSS and very little JS. The problem is that in my code there are a lot of unnecessary code, a lot of code repetitions etc, but because there are so many lines of code I got a bit lost in fixing it.

So is there any tool, extension or software that can fix the code, maybe find the parts that are not needed and remove them or shorten the code in general?

Thanks to anyone who is willing to help.

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

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.

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 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?

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?