Seeking assistance in creating a strategy to launch this as a DESKTOP version:
https://i.sstatic.net/Am2xu.png
Additionally, the challenge lies in transforming the desktop version into a Mobile version that functions and appears similar to this:
https://i.sstatic.net/6MEO5.png
All opinions and ideas are welcomed! :)
If you want to achieve that specific design, you can utilize nested flexboxes with some acrobatic moves.
Here is a quick and rough example to showcase the technique. Feel free to adjust the code to suit your requirements.
NOTES:
The line behind the number is actually just one line (div class=unit__timeline) for demonstration purposes. To make it more visually appealing, you will need two 'div-lines' on a live server. You can align them using the same technique by calculating the necessary sizes/height/width of your section (using absolute positioning and calculation values for top/right/bottom/left).
Regarding breakpoints: there are only two specified (mobile and small desktops). Make sure to calculate sizes for font-size, grid layout, etc. according to your needs.
html {
font-family: sans-serif;
}
.unit__wrapper {
position: relative;
display: flex;
flex-direction: row;
}
.unit {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.unit__number {
padding-bottom: 20px;
}
.unit__number span {
display: block;
width: 50px;
height: 50px;
font-size: 20px;
background: steelblue;
border: 15px solid white;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.unit__content {
flex-grow: 1;
padding: 0 15px;
text-align: center;
}
.unit__timeline {
position: absolute;
top: 32.5px;
left: calc( 100% / 6 );
right: calc( 100% / 6 );
height: 10px;
background: green;
z-index: -1;
}
@media (min-width: 768px) {
.unit__wrapper {
flex-direction: column;
}
.unit {
flex-direction: row;
}
.unit__number {
padding: 20px 0;
}
.unit__content {
text-align: left;
padding: 0;
}
.unit__timeline {
left: 32.5px;
top: 60px;
bottom: 60px;
right: auto;
height: auto;
width: 10px;
}
}<div class="unit__wrapper">
<div class="unit__timeline"></div>
<div class="unit">
<div class="unit__number"><span>1</span></div>
<div class="unit__content">
Li Europan lingues es membres del sam familie.
...
</div>Is there a way to exclude the Bootstrap style file located in node_modules? node_modules\bootstrap\scss\_reboot.scss I am facing an issue where my custom styles are being overridden by this file. Even after trying to remove certain proper ...
After learning HTML/CSS/Js/PhP over a few months, I recently completed my first website. I am facing an issue with one of the pages on my website when viewed on a mobile device. The parallax scrolling header image does not scroll either horizontally or ve ...
Within my AngularJS web application, I am dynamically loading various SVGs and adjusting the opacity of their layers. Some paths within these SVGs have fill pattern properties like this: <defs> <pattern id="glass-floral" patternUnits="userSpace ...
In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...
My layout is not working as expected - I want these two elements to be side by side in the center before a media query, and then stack on top of each other when it hits. But for some reason, it's not behaving the way I intended. I've tried to ce ...
I am working on a rentals theme where the search engine lists cities. However, I want to add a prefix like "Detroit-cheap-rentals" for better SEO, even though the city name and slug must be the same. Currently, the search engine displays "Detroit Cheap Re ...
I am currently working on developing a grid system for my Blazor application that features small fixed-size columns with one large column. Instead of dividing the grid into 12 columns using col-xs-*, I have opted to set custom widths without using the col ...
Seeking assistance with creating PHP code that can count the number of divs inside a parent div and add additional code if the inner divs match a specific count. The HTML structure is as follows: <div class="row-fluid str_category"> <div cl ...
Attempting to integrate global SCSS variables into my Vue project has been a bit of a challenge. I came across helpful resources on CSS-Tricks and Vue School that suggested installing sass-loader by running npm i node-sass sass-loader in the command line. ...
I am facing an issue with the layout of two tables. The table on the right side has a fixed width of 470px, while the other table should occupy the remaining space in the window. Is there a way to make the width of the first table dynamic so that as the wi ...
I'm encountering issues with database transactions on IOS devices. When the user does not interact with the phone, everything functions as expected. However, if the user taps, scrolls, or touches the screen, some transactions bypass the actual transac ...
My goal is to create a unique e-commerce checkout page design. Each panel would be opened sequentially, with the next panel unfreezing when the action button of the current panel is clicked. However, I seem to be making a mistake as it is not working as in ...
I'm currently utilizing the Skeleton boilerplate to craft a responsive design. Here is how it appears in Chrome and Firefox: Chrome: Firefox: Visually, the gray bar intended to be the menu displays correctly in Chrome. My objective is to create a ...
In the process of building a website, I am faced with the task of retrieving multiple rows of data from my database. Each displayed row should be accompanied by a button with a unique name. However, I am struggling to ensure that each button is assigned a ...
Is it possible to have a child <img> wider than its parent div, while maintaining proportional width and preserving vertical space? Using position:absolute; might move the image out of the normal document flow, but I want to keep the vertical space ...
My attempt to deploy my Angular app on Heroku is resulting in an unusual error. I've experimented with changing the styles path in angular.json, but it hasn't resolved the issue. I suspect it's a path problem, yet I can't seem to corre ...
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementB ...
Struggling to implement SASS Variables in my Vue 3, Vuetify 3, Vite build as I keep running into an error regarding variables not being declared with !default Following the guidelines provided in theVuetify 3 documentation for configuring SASS Variables. ...
I am facing an issue with two modal windows on the same page. When I click on the button with the attribute: data-target='#change', the CHANGE MODAL WINDOW fails to show up. As I lack experience in JavaScript, could the problem be with the follo ...
I have successfully created a table that triggers a popup revealing different information when you click on a td. The popup works accordingly for each td. What's going well: The functionality to hide any open popups and display the relevant one when ...