1 line
No EOL
37 KiB
XML
1 line
No EOL
37 KiB
XML
<?xml version="1.0" encoding="UTF-8"?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/"><category term="css" label="r/css"/><updated>2023-01-28T12:51:48+00:00</updated><icon>https://www.redditstatic.com/icon.png/</icon><id>/r/css.rss</id><link rel="self" href="https://www.reddit.com/r/css.rss" type="application/atom+xml" /><link rel="alternate" href="https://www.reddit.com/r/css" type="text/html" /><logo>https://e.thumbs.redditmedia.com/CAnW7J-tNWljwOK4.png</logo><subtitle>For discussing Cascading Style Sheets, design principles, and technological innovations related to web development.</subtitle><title>Cascading Style Sheets</title><entry><author><name>/u/zorefcode</name><uri>https://www.reddit.com/user/zorefcode</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/zorefcode"> /u/zorefcode </a> <br/> <span><a href="https://youtube.com/watch?v=nJIp_XIkeKc&amp;feature=share">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10n9nei/css_flexbox/">[comments]</a></span></content><id>t3_10n9nei</id><link href="https://www.reddit.com/r/css/comments/10n9nei/css_flexbox/" /><updated>2023-01-28T07:54:59+00:00</updated><published>2023-01-28T07:54:59+00:00</published><title>Css Flexbox</title></entry><entry><author><name>/u/legend29066</name><uri>https://www.reddit.com/user/legend29066</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>There is a small amount of space on both the top and bottom div even though I set the width to 100%. Can anyone help?</p> <p><a href="https://preview.redd.it/owhb00cl8rea1.png?width=1893&amp;format=png&amp;auto=webp&amp;s=8ffae7351e5ae8612e1cc5a1a9b3fede9d2998fd">https://preview.redd.it/owhb00cl8rea1.png?width=1893&amp;format=png&amp;auto=webp&amp;s=8ffae7351e5ae8612e1cc5a1a9b3fede9d2998fd</a></p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/legend29066"> /u/legend29066 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10nbaez/how_do_i_get_rid_of_the_small_excess_space_on_the/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10nbaez/how_do_i_get_rid_of_the_small_excess_space_on_the/">[comments]</a></span></content><id>t3_10nbaez</id><link href="https://www.reddit.com/r/css/comments/10nbaez/how_do_i_get_rid_of_the_small_excess_space_on_the/" /><updated>2023-01-28T09:41:37+00:00</updated><published>2023-01-28T09:41:37+00:00</published><title>How do I get rid of the small excess space on the side of my web page?</title></entry><entry><author><name>/u/speckz</name><uri>https://www.reddit.com/user/speckz</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/speckz"> /u/speckz </a> <br/> <span><a href="https://www.bram.us/2023/01/12/sibling-scopes-in-css-thanks-to-has/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10mkig4/sibling_scopes_in_css_thanks_to_has/">[comments]</a></span></content><id>t3_10mkig4</id><link href="https://www.reddit.com/r/css/comments/10mkig4/sibling_scopes_in_css_thanks_to_has/" /><updated>2023-01-27T13:13:47+00:00</updated><published>2023-01-27T13:13:47+00:00</published><title>Sibling Scopes in CSS, thanks to :has()</title></entry><entry><author><name>/u/speckz</name><uri>https://www.reddit.com/user/speckz</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/speckz"> /u/speckz </a> <br/> <span><a href="https://codepen.io/gayane-gasparyan/pen/wvxewXO">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10mkjxf/html_css_3d_card/">[comments]</a></span></content><id>t3_10mkjxf</id><link href="https://www.reddit.com/r/css/comments/10mkjxf/html_css_3d_card/" /><updated>2023-01-27T13:15:50+00:00</updated><published>2023-01-27T13:15:50+00:00</published><title>HTML & CSS 3D Card</title></entry><entry><author><name>/u/F-L-A-C-K-O</name><uri>https://www.reddit.com/user/F-L-A-C-K-O</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p><code>&lt;template&gt;</code><br/> <code>&lt;div id=&quot;wrapper&quot;&gt;</code><br/> <code>&lt;div class=&quot;burger-menu&quot; v-bind:class=&quot;{ &#39;hidden&#39;: !showMobileMenu }&quot; id=&quot;burger-menu&quot;&gt;</code><br/> <code>&lt;div class=&quot;bar&quot;&gt;&lt;/div&gt;</code><br/> <code>&lt;div class=&quot;bar&quot;&gt;&lt;/div&gt;</code><br/> <code>&lt;div class=&quot;bar&quot;&gt;&lt;/div&gt;</code><br/> <code>&lt;/div&gt;</code><br/> <code>&lt;nav class=&quot;navbar&quot;&gt;</code><br/> <code>&lt;router-link to=&quot;/&quot; class=&quot;navbar-Item&quot;&gt;RELOAD&lt;/router-link&gt;</code><br/> <code>&lt;router-link to=&quot;/galery&quot; class=&quot;navbar-Item&quot;&gt;GALERIE&lt;/router-link&gt;</code><br/> <code>&lt;router-link to=&quot;/tickets&quot; class=&quot;navbar-Item&quot;&gt;TICKETS&lt;/router-link&gt;</code><br/> <code>&lt;template v-if=&quot;$store.state.isAuthenticated&quot;&gt;</code><br/> <code>&lt;router-link to=&quot;/my-account&quot; class=&quot;navbar-Item&quot;&gt;ACCOUNT&lt;/router-link&gt;</code><br/> <code>&lt;/template&gt;</code><br/> <code>&lt;template v-else&gt;</code><br/> <code>&lt;router-link to=&quot;/login&quot; class=&quot;navbar-Item&quot;&gt;LOGIN&lt;/router-link&gt;</code><br/> <code>&lt;router-link to=&quot;/sign-up&quot; class=&quot;navbar-Item&quot;&gt;REGISTRIERUNG&lt;/router-link&gt;</code><br/> <code>&lt;/template&gt;</code><br/> <code>&lt;router-link to=&quot;/contact&quot; class=&quot;navbar-Item&quot;&gt;KONTAKT&lt;/router-link&gt;</code><br/> <code>&lt;/nav&gt;</code> </p> <p><code>&lt;section class=&quot;section&quot;&gt;</code><br/> <code>&lt;router-view/&gt;</code><br/> <code>&lt;/section&gt;</code><br/> <code>&lt;footer&gt;</code><br/> <code>&lt;p class=&quot;has-text-centered&quot;&gt;© 2022 Julius Buller&lt;/p&gt;</code><br/> <code>&lt;/footer&gt;</code><br/> <code>&lt;/div&gt;</code><br/> <code>&lt;/template&gt;</code></p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/F-L-A-C-K-O"> /u/F-L-A-C-K-O </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10msekn/what_is_the_best_way_to_responsively_position_the/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10msekn/what_is_the_best_way_to_responsively_position_the/">[comments]</a></span></content><id>t3_10msekn</id><link href="https://www.reddit.com/r/css/comments/10msekn/what_is_the_best_way_to_responsively_position_the/" /><updated>2023-01-27T18:41:22+00:00</updated><published>2023-01-27T18:41:22+00:00</published><title>What is the best way to responsively position the first .navbar-item on the left side of the navbar, while the rest stays on the right side? If possible with flex-box</title></entry><entry><author><name>/u/aremu_smog</name><uri>https://www.reddit.com/user/aremu_smog</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/aremu_smog"> /u/aremu_smog </a> <br/> <span><a href="https://www.youtube.com/watch?v=Es7Ehag46YE&amp;t=708s">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10mlyj1/learn_how_to_build_chrome_extensions_with_css/">[comments]</a></span></content><id>t3_10mlyj1</id><link href="https://www.reddit.com/r/css/comments/10mlyj1/learn_how_to_build_chrome_extensions_with_css/" /><updated>2023-01-27T14:19:40+00:00</updated><published>2023-01-27T14:19:40+00:00</published><title>Learn How to Build Chrome Extensions with CSS, HTML, and JavaScript</title></entry><entry><author><name>/u/YaBoiToaster</name><uri>https://www.reddit.com/user/YaBoiToaster</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>I used ::before and ::after to add a special character to a header and the left is what i got. I want to make it like it is on the right, where the character is in the mid point of the header.</p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/YaBoiToaster"> /u/YaBoiToaster </a> <br/> <span><a href="https://i.redd.it/mzb9c2b19mea1.jpg">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10mj0yw/how_to_using_before_and_after/">[comments]</a></span></content><id>t3_10mj0yw</id><link href="https://www.reddit.com/r/css/comments/10mj0yw/how_to_using_before_and_after/" /><updated>2023-01-27T11:53:55+00:00</updated><published>2023-01-27T11:53:55+00:00</published><title>How to? Using ::before and ::after</title></entry><entry><author><name>/u/France_linux_css</name><uri>https://www.reddit.com/user/France_linux_css</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/France_linux_css"> /u/France_linux_css </a> <br/> <span><a href="https://i.redd.it/bakj9uyznhea1.png">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10m8j5f/is_there_a_way_to_make_all_cards_same_size/">[comments]</a></span></content><id>t3_10m8j5f</id><link href="https://www.reddit.com/r/css/comments/10m8j5f/is_there_a_way_to_make_all_cards_same_size/" /><updated>2023-01-27T01:30:58+00:00</updated><published>2023-01-27T01:30:58+00:00</published><title>Is there a way to make all cards same size according to the heighest one ?</title></entry><entry><author><name>/u/Ok_Cobbler3360</name><uri>https://www.reddit.com/user/Ok_Cobbler3360</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/Ok_Cobbler3360"> /u/Ok_Cobbler3360 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10mohj0/why_does_my_navbar_shows_under_the_box_container/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10mohj0/why_does_my_navbar_shows_under_the_box_container/">[comments]</a></span></content><id>t3_10mohj0</id><link href="https://www.reddit.com/r/css/comments/10mohj0/why_does_my_navbar_shows_under_the_box_container/" /><updated>2023-01-27T16:05:23+00:00</updated><published>2023-01-27T16:05:23+00:00</published><title>Why does my navbar shows under the box container? how do I fix this</title></entry><entry><author><name>/u/used_npkin</name><uri>https://www.reddit.com/user/used_npkin</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>Hello HTML pros:</p> <p>I love the drop-down menu on <a href="http://www.hyasforchoice.com">www.hyasforchoice.com</a> when viewed on my mobile device. Does anyone know how to code this?</p> <p>Thanks!</p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/used_npkin"> /u/used_npkin </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10mmluc/i_absolutely_love_the_mobile_dropdown_menu_how_do/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10mmluc/i_absolutely_love_the_mobile_dropdown_menu_how_do/">[comments]</a></span></content><id>t3_10mmluc</id><link href="https://www.reddit.com/r/css/comments/10mmluc/i_absolutely_love_the_mobile_dropdown_menu_how_do/" /><updated>2023-01-27T14:48:05+00:00</updated><published>2023-01-27T14:48:05+00:00</published><title>I absolutely love the mobile drop-down menu. How do I code it?</title></entry><entry><author><name>/u/dooblr</name><uri>https://www.reddit.com/user/dooblr</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/dooblr"> /u/dooblr </a> <br/> <span><a href="https://i.redd.it/hp89lqz0xiea1.png">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10mddv1/how_would_you_create_an_offset_stroke_effect_with/">[comments]</a></span></content><id>t3_10mddv1</id><link href="https://www.reddit.com/r/css/comments/10mddv1/how_would_you_create_an_offset_stroke_effect_with/" /><updated>2023-01-27T05:41:27+00:00</updated><published>2023-01-27T05:41:27+00:00</published><title>How would you create an offset stroke effect with transparency to background such as this?</title></entry><entry><author><name>/u/parthmty</name><uri>https://www.reddit.com/user/parthmty</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/parthmty"> /u/parthmty </a> <br/> <span><a href="https://caniuse.com/?search=letter%20spacing">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10lsmxs/mdn_vs_caniuse_which_is_more_trustworthy_for/">[comments]</a></span></content><id>t3_10lsmxs</id><link href="https://www.reddit.com/r/css/comments/10lsmxs/mdn_vs_caniuse_which_is_more_trustworthy_for/" /><updated>2023-01-26T14:09:43+00:00</updated><published>2023-01-26T14:09:43+00:00</published><title>MDN vs caniuse (Which is more trustworthy for checking browser compatibility data)</title></entry><entry><author><name>/u/tempo90909</name><uri>https://www.reddit.com/user/tempo90909</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>I understand grid and flexbox - I think. The problem is that I don&#39;t understand them in conjunction with ads on the side. Ad boxes need to be the same height as the rest of the content on the left if say you have an article on the left. How does that work? No YouTubes explaining it. No articles explaining it. Any help?</p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/tempo90909"> /u/tempo90909 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10m7g39/struggling_with_grid_flexbox/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10m7g39/struggling_with_grid_flexbox/">[comments]</a></span></content><id>t3_10m7g39</id><link href="https://www.reddit.com/r/css/comments/10m7g39/struggling_with_grid_flexbox/" /><updated>2023-01-27T00:38:11+00:00</updated><published>2023-01-27T00:38:11+00:00</published><title>Struggling with grid / flexbox</title></entry><entry><author><name>/u/Asleep-Kiwi-1552</name><uri>https://www.reddit.com/user/Asleep-Kiwi-1552</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>Years ago, when smaller displays started sporting higher resolutions (eg Retina), there was a lot of community discussion about how it would affect responsive web design. The distance between CSS pixels and physical pixels was becoming larger and more varied. Type could look very different on monitors that only differed by a couple inches. A lot of that discussion boiled down to three lines of thought:</p> <p>1) Use absolute units on the root and relative units elsewhere. There are some downsides, like having to clamp everything that could possibly get too big or small.</p> <p>2) Use media queries for resolution and pixel density to fix things. This can quickly get messy, confusing, and repetitive. Doubly so if you&#39;re targeting a broad range of densities.</p> <p>3) Ignore the problem until OS and browser providers could create a better solution through scaling. This was the solution most appealing to me, for obvious reasons. </p> <p>So, what is the state of the art? Have OS and browser providers come up with an effective solution? Do you folks ever change your OS scaling while working on a project? Does anyone still query pixel density?</p> <p>To be transparent, I&#39;m asking because I volunteered to make a site for someone. My go-to solution is #1, but I haven&#39;t made a site in a long time. I&#39;ve noticed a lot less discussion on the topic in the past couple years. That makes me suspect that something has changed. TIA.</p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/Asleep-Kiwi-1552"> /u/Asleep-Kiwi-1552 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10m7o9o/questiondiscussion_do_you_still_worry_about_pixel/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10m7o9o/questiondiscussion_do_you_still_worry_about_pixel/">[comments]</a></span></content><id>t3_10m7o9o</id><link href="https://www.reddit.com/r/css/comments/10m7o9o/questiondiscussion_do_you_still_worry_about_pixel/" /><updated>2023-01-27T00:49:21+00:00</updated><published>2023-01-27T00:49:21+00:00</published><title>Question/Discussion: Do you still worry about pixel density in 2023?</title></entry><entry><author><name>/u/havocshack</name><uri>https://www.reddit.com/user/havocshack</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>Hello! I am a web developer trying to build out some small websites and start doing more freelancing. I build all my sites out in Angular and use Docker to run them. As long as you have docker installed, you can run the Angular apps locally.</p> <p>I am struggling with some CSS styling around two areas, masking and placing images on top of other elements (but also responsive). I was hoping to hire someone who is an expert at CSS and pay them accordingly. If you&#39;re interested, I could send you more details via DM. Here is an example of one of the CSS fixes I would need.</p> <p>Add a green shadow/backdrop to the masked image here.</p> <p>&#x200B;</p> <p>Thanks in advance!</p> <p>&#x200B;</p> <p>EDIT: Thanks everyone for the help! I had an awesome developer reach out who helped me on one of the issues I was having. Thanks for the comments to fix the other. </p> <p>&#x200B;</p> <p>Cheers everyone!</p> <p>&#x200B;</p> <p><a href="https://preview.redd.it/fo6akqqwffea1.png?width=5272&amp;format=png&amp;auto=webp&amp;s=4a3d8a2c515c24c97bfa412bec7a6f0ef241c825">https://preview.redd.it/fo6akqqwffea1.png?width=5272&amp;format=png&amp;auto=webp&amp;s=4a3d8a2c515c24c97bfa412bec7a6f0ef241c825</a></p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/havocshack"> /u/havocshack </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10ly3dv/looking_to_hire_css_help_on_some_small_angular/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10ly3dv/looking_to_hire_css_help_on_some_small_angular/">[comments]</a></span></content><id>t3_10ly3dv</id><link href="https://www.reddit.com/r/css/comments/10ly3dv/looking_to_hire_css_help_on_some_small_angular/" /><updated>2023-01-26T18:01:43+00:00</updated><published>2023-01-26T18:01:43+00:00</published><title>Looking to hire CSS help on some small Angular sites.</title></entry><entry><author><name>/u/legend29066</name><uri>https://www.reddit.com/user/legend29066</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>&#x200B;</p> <p>&#x200B;</p> <p><a href="https://preview.redd.it/psc41itlmfea1.png?width=1805&amp;format=png&amp;auto=webp&amp;s=f5ebccad297d8f9c5608b7adf1745d5ba37f7c8c">https://preview.redd.it/psc41itlmfea1.png?width=1805&amp;format=png&amp;auto=webp&amp;s=f5ebccad297d8f9c5608b7adf1745d5ba37f7c8c</a></p> <p><a href="https://preview.redd.it/1r14yc2nmfea1.png?width=1061&amp;format=png&amp;auto=webp&amp;s=24ca6bc86704eb80d6a677d9d0e3312e6c27fbef">https://preview.redd.it/1r14yc2nmfea1.png?width=1061&amp;format=png&amp;auto=webp&amp;s=24ca6bc86704eb80d6a677d9d0e3312e6c27fbef</a></p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/legend29066"> /u/legend29066 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10lyy8j/can_someone_give_me_ideas_on_how_to_make_this/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10lyy8j/can_someone_give_me_ideas_on_how_to_make_this/">[comments]</a></span></content><id>t3_10lyy8j</id><link href="https://www.reddit.com/r/css/comments/10lyy8j/can_someone_give_me_ideas_on_how_to_make_this/" /><updated>2023-01-26T18:37:58+00:00</updated><published>2023-01-26T18:37:58+00:00</published><title>Can someone give me ideas on how to make this apply page much more appealing?</title></entry><entry><author><name>/u/dmattox10</name><uri>https://www.reddit.com/user/dmattox10</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/dmattox10"> /u/dmattox10 </a> <br/> <span><a href="https://v.redd.it/exmyvedbi8ea1">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10l62n5/i_spent_way_too_much_time_on_this_hamburger_for/">[comments]</a></span></content><id>t3_10l62n5</id><link href="https://www.reddit.com/r/css/comments/10l62n5/i_spent_way_too_much_time_on_this_hamburger_for/" /><updated>2023-01-25T18:42:21+00:00</updated><published>2023-01-25T18:42:21+00:00</published><title>I spent way too much time on this hamburger for my portfolio</title></entry><entry><author><name>/u/madmanmax58</name><uri>https://www.reddit.com/user/madmanmax58</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>Hello, I created a simple file to illustrate my question better.<br/> Github: <a href="https://github.com/HRDTS/cssTesting">https://github.com/HRDTS/cssTesting</a><br/> Preview: <a href="https://htmlpreview.github.io/?https://github.com/HRDTS/cssTesting/blob/main/index.html">https://htmlpreview.github.io/?https://github.com/HRDTS/cssTesting/blob/main/index.html</a></p> <p>My question: I want the width of the image to be 100vw and the height to be whatever the image file is. So there should be a scroll bar so the user can scroll down. The width needs to stay 100vw.</p> <p>Another question: there is a green square (div) on the image. I want to set this div to a certain position and make it stay there. So when the user zooms in or out, it should stay where it is. The green square currently moves. I need to set this square to a fixed position so I can complete my &#39;where is waldo&#39; app.</p> <p>Been struggling with this for a little too long now, so any help is much appreciated. Thx!</p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/madmanmax58"> /u/madmanmax58 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10lolg5/css_background_problem/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10lolg5/css_background_problem/">[comments]</a></span></content><id>t3_10lolg5</id><link href="https://www.reddit.com/r/css/comments/10lolg5/css_background_problem/" /><updated>2023-01-26T10:12:28+00:00</updated><published>2023-01-26T10:12:28+00:00</published><title>css background problem</title></entry><entry><author><name>/u/Cheap-Regret-1244</name><uri>https://www.reddit.com/user/Cheap-Regret-1244</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>How do you code a hover effect for a text with underline? The underline will animate to be a box.</p> <p>I know border is one way to do it but I want animation of the line forming a box using pseudo elements, just don&#39;t know how to do it. Underline is pretty common to find but I can&#39;t find the underline to box</p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/Cheap-Regret-1244"> /u/Cheap-Regret-1244 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10lohmb/underline_to_box_animation/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10lohmb/underline_to_box_animation/">[comments]</a></span></content><id>t3_10lohmb</id><link href="https://www.reddit.com/r/css/comments/10lohmb/underline_to_box_animation/" /><updated>2023-01-26T10:04:39+00:00</updated><published>2023-01-26T10:04:39+00:00</published><title>Underline to box animation</title></entry><entry><author><name>/u/Chathen</name><uri>https://www.reddit.com/user/Chathen</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p><a href="https://preview.redd.it/5ugmfrsk5eea1.png?width=1366&amp;format=png&amp;auto=webp&amp;s=ecec0eeaddec60e87ca480079da30d30e1ebbcb1">1) the first element doesnt align with baseline property</a></p> <p><a href="https://preview.redd.it/46nwjusk5eea1.png?width=1366&amp;format=png&amp;auto=webp&amp;s=2708ca318b3598e8da3a4f09eb05e596f941506a">2) a better view, can see it crosses the provided div height.</a></p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/Chathen"> /u/Chathen </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10ls36u/flexbox_seems_to_be_broken_works_for_all_items/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10ls36u/flexbox_seems_to_be_broken_works_for_all_items/">[comments]</a></span></content><id>t3_10ls36u</id><link href="https://www.reddit.com/r/css/comments/10ls36u/flexbox_seems_to_be_broken_works_for_all_items/" /><updated>2023-01-26T13:43:07+00:00</updated><published>2023-01-26T13:43:07+00:00</published><title>flexbox seems to be broken, works for all items except one(see comment for code)</title></entry><entry><author><name>/u/Izaak85</name><uri>https://www.reddit.com/user/Izaak85</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>Hello, I have a problem with a banner that I want to place on the home page, I want to place 4 images horizontally that occupy the entire width of the screen (on mobile they are one below the other) but I have the problem that when I want to place them on larger size one goes down (as seen in the picture)</p> <p>&#x200B;</p> <p>How could I make all four of them line up and use the full width of the screen using 50% of the screen height? this is the css i am currently using</p> <p>&#x200B;</p> <p>.child{</p> <p>float: left;</p> <p>width: 40%;</p> <p>padding: px;</p> <p>box-sizing: border-box;</p> <p>}</p> <p>.child img{</p> <p>width: 100%;</p> <p>}</p> <p>&#x200B;</p> <p>&lt;div class=&quot;parent&quot;&gt; </p> <p>&lt;div class=&quot;child&quot;&gt; </p> <p>&lt;img src=&quot;image\\\_source1&quot;&gt; </p> <p>&lt;/div&gt; </p> <p>&lt;div class=&quot;child&quot;&gt; </p> <p>&lt;img src=&quot;img\\\_source2&quot;&gt; </p> <p>&lt;/div&gt; </p> <p>&lt;div class=&quot;child&quot;&gt; </p> <p>&lt;img src=&quot;image\_source3&gt;</p> <p>&lt;/div&gt; </p> <p>&lt;div class=&quot;child&quot;&gt; </p> <p>&lt;img src=&quot;image\\\_source4&quot;&gt; </p> <p>&lt;/div&gt; </p> <p>&lt;/div&gt; </p> <p>&#x200B;</p> <p>Thank you very much, I will be attentive to any comment</p> <p><a href="https://preview.redd.it/j4lfuagmdbea1.png?width=754&amp;format=png&amp;auto=webp&amp;s=bfd7bdf4eecf8201a7c4dfc08fd3369cb70c089c">https://preview.redd.it/j4lfuagmdbea1.png?width=754&amp;format=png&amp;auto=webp&amp;s=bfd7bdf4eecf8201a7c4dfc08fd3369cb70c089c</a></p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/Izaak85"> /u/Izaak85 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10lj8s1/problem_with_banner/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10lj8s1/problem_with_banner/">[comments]</a></span></content><id>t3_10lj8s1</id><link href="https://www.reddit.com/r/css/comments/10lj8s1/problem_with_banner/" /><updated>2023-01-26T04:19:32+00:00</updated><published>2023-01-26T04:19:32+00:00</published><title>Problem with banner</title></entry><entry><author><name>/u/No_Car5573</name><uri>https://www.reddit.com/user/No_Car5573</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/No_Car5573"> /u/No_Car5573 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10l6tm4/where_i_can_find_free_figma_templates_or_designs/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10l6tm4/where_i_can_find_free_figma_templates_or_designs/">[comments]</a></span></content><id>t3_10l6tm4</id><link href="https://www.reddit.com/r/css/comments/10l6tm4/where_i_can_find_free_figma_templates_or_designs/" /><updated>2023-01-25T19:11:17+00:00</updated><published>2023-01-25T19:11:17+00:00</published><title>Where i can find free figma templates or designs to sharpen my css skills ?</title></entry><entry><author><name>/u/joseville1001</name><uri>https://www.reddit.com/user/joseville1001</uri></author><category term="css" label="r/css"/><content type="html"><!-- SC_OFF --><div class="md"><p>Is <code>display: inline-block</code> shorthand for outer display type of <code>inline</code> and inner display type of <code>block</code>? Or is it just a <code>inline</code>-<code>block</code> hybrid?</p> <p><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#using_display_inline-block">MDN CSS &gt; The Box Model &gt; Using <code>display: inline-block</code></a>?</p> <hr/> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display#which_syntax_should_you_use_now">This ref</a> has an example of two-value display value, <code>display: inline flex</code>, which means <code>inline</code> outer display and <code>flex</code> inner display. Or equivalently, one can use a single value <code>display: inline-flex</code>.</p> </div><!-- SC_ON --> &#32; submitted by &#32; <a href="https://www.reddit.com/user/joseville1001"> /u/joseville1001 </a> <br/> <span><a href="https://www.reddit.com/r/css/comments/10le2ov/is_display_inlineblock_shorthand_for_outer/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10le2ov/is_display_inlineblock_shorthand_for_outer/">[comments]</a></span></content><id>t3_10le2ov</id><link href="https://www.reddit.com/r/css/comments/10le2ov/is_display_inlineblock_shorthand_for_outer/" /><updated>2023-01-26T00:07:44+00:00</updated><published>2023-01-26T00:07:44+00:00</published><title>Is `display: inline-block` shorthand for outer display type of `inline` and inner display type of `block`? Or is it just a `inline`-`block` hybrid?</title></entry><entry><author><name>/u/jscraft</name><uri>https://www.reddit.com/user/jscraft</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/jscraft"> /u/jscraft </a> <br/> <span><a href="https://www.js-craft.io/blog/css-ellipsis-the-3-dots-on-multiple-lines/">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10kxbhc/css_ellipsis_the_3_dots_on_multiple_lines_js_craft/">[comments]</a></span></content><id>t3_10kxbhc</id><link href="https://www.reddit.com/r/css/comments/10kxbhc/css_ellipsis_the_3_dots_on_multiple_lines_js_craft/" /><updated>2023-01-25T12:17:20+00:00</updated><published>2023-01-25T12:17:20+00:00</published><title>CSS ellipsis (the 3 dots) on multiple lines - Js Craft</title></entry><entry><author><name>/u/dooblr</name><uri>https://www.reddit.com/user/dooblr</uri></author><category term="css" label="r/css"/><content type="html">&#32; submitted by &#32; <a href="https://www.reddit.com/user/dooblr"> /u/dooblr </a> <br/> <span><a href="https://i.redd.it/k7y8dheq4aea1.jpg">[link]</a></span> &#32; <span><a href="https://www.reddit.com/r/css/comments/10le3e9/how_would_you_apply_an_offset_stroke_to_text_such/">[comments]</a></span></content><id>t3_10le3e9</id><link href="https://www.reddit.com/r/css/comments/10le3e9/how_would_you_apply_an_offset_stroke_to_text_such/" /><updated>2023-01-26T00:08:33+00:00</updated><published>2023-01-26T00:08:33+00:00</published><title>How would you apply an offset stroke to text such as this?</title></entry></feed> |