Tips for successfully implementing overflow-x in a timeline layout without causing any format disruptions

I've been working on a dynamic timeline design that adapts to different screen sizes. I applied overflow-x property to prevent horizontal scrolling in the mobile version, making the burger menu's sub-items visible without requiring a click. However, this adjustment caused the circles on my timeline to be cut in half. I'm looking for a solution that allows me to maintain full circles while still preventing horizontal scrolling. Any suggestions?

*{
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
        overflow-x: hidden;
}
.CV{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width:100%;
}

...

</section>


<!--Javascript for Toggle Menu-->
    <script>
        var navLinks = document.getElementById("navLinks");
        
        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-200px";
        }
    </script>
    
    </body>
</html>

htmlcsshtml-listsoverflowtimeline

Answer №1

To display the red midpoint, you can add CSS display: inline-table to the CSS selector .timeline ul li. If you prefer not to have overflow-y: hidden; on .CV, .timeline, feel free to remove it; however, be sure to also delete padding: 40px 0; on .timeline. Here's an example code snippet:

*{
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
        overflow-x: hidden;
}
.CV{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width:100%;
}

.timeline:before{
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;

... (code continues) ...


</section>


<!--Javascript for Toggle Menu-->
    <script>
        var navLinks = document.getElementById("navLinks");
        
        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-200px";
        }
    </script>
    
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Gradually appear/disappear div element with a delay added

Storing divs in an array and deleting them after appending is my current method. Now, I'm looking to incorporate a fade-in and fade-out effect on each div with a delay. Check out this code snippet : var arr = $(".notification"); function display ...

javascriptjqueryhtmlcssjquery-animate

Update JSON data in ng-blur event using AngularJS

Could you offer some guidance on how to push the content from a text box into JSON when I click outside of the box? Below is the code for my text box: <input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" /> And here i ...

javascriptjsonangularjshtml

Ways to prevent a timeout when the score exceeds 1000

Could someone help me with clearing the interval and resetting the score in my code? It seems to be working fine, but when the score goes over 1000 and I hit reset, it doesn’t reset completely. I've tried placing the clearTimeout functions before e ...

javascripthtmlcssintervals

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

cssreactjsresponsive-designmaterial-design

Position the float input to the right on the same line as an element

This Angular code contains a challenge where I aim to have text at the start of a column and an input box on the right side of the page, both aligned on the same line. The issue lies in the code which floats the input to the right but disrupts the alignme ...

htmlcssangular

What can I do to prevent the border from breaking apart when I zoom in?

To address the problem of the 1px black border at the bottom of the header being cut off, try zooming into the page and scrolling right. How can this issue be resolved? ...

htmlcssxhtmlborder

Verify if data already exists in an HTML table column using JavaScript

As a beginner in web programming, I am currently trying to dynamically add data to a table. But before inserting the data into the table, my requirement is to first verify if the data already exists in a specific column, such as the name column. function ...

javascripthtmljquery

Sending a request to a PHP file using Ajax in order to display information fetched from

I am attempting to display the database row that corresponds with the student's forename and surname selected from the dropdown list. I have managed to store the first name and surname in a variable called clickeditem. However, I suspect there may be ...

phpjqueryhtmlmysqlajax

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Currently, I am working with angular and need to trigger my function codeInputChanged() each time the content of a textarea is modified either manually or programmatically using JavaScript. This is how my HTML for the textarea appears: <textarea class ...

javascripthtmlangulartypescript

Identifying the precise image dimensions required by the browser

When using the picture tag with srcset, I can specify different image sources based on viewport widths. However, what I really need is to define image sources based on the actual width of the space the image occupies after the page has been rendered by th ...

javascripthtmlcss

Ensuring that a header one remains on a single line

Within this div, I have set the width and height to be 250px. Specifically, the h1 element inside the div has a height of 50px. Users who are updating content on my website can input any text they desire within this box. However, when the text within the ...

htmlcss

Steps for implementing an EsLint Constraint specifically for next/link

How can I set up a linting rule to display an error if the next/link component is used for routing? I want to restrict routing to only be allowed through the default method. To resolve this issue, I included the statement "@next/next/no-html-link-for-pag ...

htmlnext.jseslinteslintrc

Adjust for the region shifted using transform: translate

I'm currently working on adjusting the positioning of elements using transform: translateY in CSS. The challenge I am facing is eliminating the empty space that appears between elements after repositioning one element below another without altering th ...

htmlcsscss-transforms

Collapse in Bootstrap without any Animation

How can I add animation to the Bootstrap Collapse feature on my website? I am using an icon from the Font Awesome library to trigger the collapse effect, but currently, it just pops up without any animation. What could be causing this issue? You can view ...

htmlcsstwitter-bootstrap

Leveraging Spotify's webAPI to listen to a randomly selected album by a specific artist (ID

Welcome to my little project! As I am not a developer myself, please bear with me for any silly questions that may arise. My idea is to create an "audio book machine." The concept involves using a website that showcases various artists of audiobooks. Upo ...

htmlnode.jsasp.net-web-apiraspberry-pispotify

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...

javascriptjqueryhtmlcss

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

My generated code cannot be directly modified due to its association with a large JS code. A portion of this code creates an SVG shape, which I attempted to override through CSS. However, my solution does not function properly in Firefox! Below is the ori ...

cssfirefoxsvg

Text overlapping image causing hover state interference

I'm feeling completely lost right now. My goal is to have the title of each project displayed in the center of the screen when you hover over the respective project images. I've resorted to using jQuery for this because it seems like the most str ...

jquerycssimagetypeshover

Differences in the way websites scroll on Chrome compared to Safari and Firefox

Currently, I am in the process of developing a rendering system for my application that extracts objects from a collection and processes them through JavaScript templates to generate additional children as the user scrolls through the page. The system is d ...

htmlcssgoogle-chromescrollsafari