Hey there! I'm currently working on a project and aiming to replicate the layout shown in the image below. My goal is to have an in-line list with bullets only between items that appear on the same line. I'm using react for this. If you have any insights or tips, I would really appreciate your help! https://i.sstatic.net/tnz3C.png
https://codepen.io/jane-doe/pen/wQBPMJz
I decided to divide the list into two separate parts and introduced a special condition using :not(:first-child)
<ul class="main">
<li>
<ul class="child">
<li>A</li>
<li>B </li>
<li>C</li>
</ul>
</li>
<li>
<ul class="child">
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
.main {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;
}
.child {
display: flex;
list-style-type: none;
padding: 0;
li:not(:first-child) {
position: relative;
padding-left: 5px;
&::before {
content: '';
width: 5px;
height:5px;
background-color: blue;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
}
I recently deployed a ReactJS application on AWS S3 successfully. Now, I am looking to secure it with HTTPS at the lowest cost possible. After a quick search, I came across something called Amazon CloudFront. I'm a bit confused about whether I need a ...
Take a look at www.mediawiki.org using Chrome and experiment with adjusting the page zoom (Ctrl + +/-). Any tips on how to incorporate animated zoom handling like this? I've found that it doesn't function in every browser. Appreciate any insigh ...
I attempted to apply the :hover effect specifically to a link inside a paragraph. The paragraph with the class .hop is initially hidden, but when I hover over the link, nothing happens. .hop { display: none; } a.hop2:hover + .hop { display: block; } ...
I am attempting to design a material ui carousel that shows 3 items in one row, even when the browser window is resized. I want the excess items to be hidden instead of being stacked below. Here is how it looks on full screen: https://i.stack.imgur.com/r ...
In the header of each page, there is a 'Back' button that allows users to navigate back to the previous page. The function handleGoBack() is responsible for this: import React from 'react'; import { Button, Typography } from "@mate ...
I'm currently working on creating a responsive layout for my website, but I started the project without one and now my basic template has major flaws. How can I create a template like this picture where the divs adjust as the browser viewport size cha ...
I recently implemented a fade link hover effect using the code snippet below: a:link {color:#333333; text-decoration: none; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;} a:visited {color:#FF0033; ...
I am facing an issue with building my react project using the current webpack settings. The version of webpack I am using is 3.12.0 The old version of reactboilerplate works fine with webpack.dev.js but encounters problems with webpack.prod.js. Here are m ...
Hello, I am new to using React. I have a dropdown form with a search engine in it that is working perfectly as I need. The only issue is that when I type, for example, AR in the Symbol field, it shows me ARDRBTC as expected, but I am unable to click on it ...
I recently came across a solution by @RokoC.Buljan, which works perfectly on Chrome and Firefox. However, I encountered an issue with Safari where the content section does not scroll properly and the footer sticks to the bottom of the content, making it di ...
I am currently facing an issue with setting the selected value of my react-select using useState(). I am fetching data from an API in useEffect() and populating the select options with 'brandOptions'. However, after making the API call, I am tryi ...
Currently, I have a project in which the objects are stored in MySQL with an 'active' boolean property. I have created a button that, when clicked, changes the state of the 'active' column for the object.id using an API call. The functi ...
Upon creating a new project, my Expo XDE issued the following warning: 1:37:35 PM Warning: checkPropTypes has been moved to a separate package. React.checkPropTypes is no longer supported and will be completely removed in React 16. Use the prop-types ...
I'm trying to create a table with a dynamic number of columns using html/css/Bootstrap without relying on Java Script. The table should span 100% of the parent container's width. Each column in the table should have an equal width (3 columns = ...
I have successfully changed the font-family of both input and textarea elements in HTML. However, my question is whether it's possible for two textarea fields to have different fonts applied to them individually. If so, I would appreciate some guidanc ...
I am struggling to change the default font color of the bar menu to red in a razor page. Despite trying the code below, it doesn't seem to work: <Bar Breakpoint="Breakpoint.Desktop" Background="Background.Light" ThemeContr ...
I am currently working on a CSS3 effect that triggers on mouseover. This effect involves animating an inner div by scaling it endlessly. Everything is functioning correctly, however, when I move the mouse away, the div abruptly returns to its original siz ...
After successfully developing my project in localhost and pushing it to Github, I proceeded to clone it on my AWS EC2 Ubuntu server. The public IP of the site is: . However, upon accessing the site through this IP, all the content displays except for image ...
What is the best way to handle a scenario where a child component needs to initially derive its state from the parent, but the user can also change the value of the state in the child and this change needs to be sent back to the parent? For example: const ...
I am currently attempting to modify the hover effects of my spans. Due to a specific requirement, I find myself needing to assign the same id's to all <li> elements that contain my spans. This results in all of the spans having the same parent i ...