Remove elements on Jekyll page

Question

I'm a beginner who is trying to set up a site using Jekyll and I'm currently using a theme that was forked from GitHub.

I like the theme but would like to make minor adjustments to the layout such as the About page . I have no interest in the sections like 'Project', 'Skills', 'Bio' & 'Education'. I purely just want the 'About' section.

1. How can I remove the unwanted sections?

2. What should I do with the.yml &.html files of the unwanted sections? Is there a way to keep them still?

I am using the Leonids theme .

Thanks in advance!

#About.html
    ---
    layout: default
    ---
    <div class="row">
        <div class="col l7">
            <div class="row">
                <div class="col">
                    {% include sections/about.html %}
                </div>
            </div>
    
            <div class="row">
                <div class="col">
                    {% include sections/projects.html %}
                </div>
            </div>
        </div>
    
        <div class="col l4 offset-l1">
            <div class="row">
                {% include sections/skills.html %}
            </div>
            <div class="row">
                {% include sections/career.html %}
            </div>
            <div class="row">
                {% include sections/education.html %}
            </div>
        </div>
    
    
    </div>

Answer 1

you can hide section from showing on front end using CSS. for this, you can give a class to a particular section

<div class="col hidethis"> .......</div>

write this css in your css file .hidethis{ display:none; } .hidethis{ display:none; }

Answer 2

I managed to solve the issue by adding the following before the unwanted sections:

<style>
.hidethis {
    display: none;
}

In the final code:

<style>
.hidethis {
    display: none;
}

// Other About sections

         <div class="row">
             <div class="col">
                 {% include sections/projects.html %}
             </div>
         </div>
     </div>

     <div class="col l4 offset-l1">
         <div class="row">
             {% include sections/skills.html %}
         </div>
         <div class="row">
             {% include sections/career.html %}
         </div>
         <div class="row">
             {% include sections/education.html %}
</style>

This seems to work for now: :) Thanks @Jayant Vyas for the suggestion!