, you'll find a flex container by the name of .tabs-ids that holds both the tab buttons and their respective content to display upon clicking.
The reason why, on wider screens, the elements remain on the same line instead of wrapping to the next line (referred to as "my tabs moving to the vertical side on big screen") is due to the flex layout organizing these elements based on their size relative to their content.
To counteract this behavior, one simple solution is to apply a distinct style to the element containing the actual displayed content. By adding a new class to these particular elements and ensuring they occupy 100% of the width within their container, they will automatically wrap onto a new line when necessary.
In your code's style section, the sole adjustment I made was incorporating the following snippet:
.tabs-panel.actual-content {
width: 100%;
}
Additionally, I assigned the 'actual-content' class to the elements housing the text content for proper styling.
Followed by some CSS code defining variables and styling instructions, including classes like .ids-markdown, .tabs-ids, .tabs-input, .tabs-label, .tabs-panel, and more to enhance the overall design and functionality of the tabs feature being implemented in your project.
This segment showcases a sample structure utilizing the provided CSS styles with HTML markup exemplifying the tabs interface setup and content organization:
:root {
--ids_color_action_neutral_base: #3B3B3B;
...
<div class="ids-markdown">
<div class="tabs-ids">
<input class="tabs-input" id="tab-ids-1" name="tabs-ids" type="radio" checked>
...
</div>
You have a flex container .tabs-ids holding the elements being both the tab buttons and the actual content to be shown when such buttons get clicked.
The reason why on wider screen the elements are kept on the same line instead of wrapping on the next line (what you called my tabs moving to the vertical side on big screen) is because your flex layout arranges those elements according to their size based on their content.
What you need to avoid that behaviour is to style differently the element with the actual content to be shown.
If you simply add a new class to the elements containing the actual content you can style those to make sure they take 100% width of their container and they will surely wrap on the next line.
This was the only modification I did to the style section of your code:
.tabs-panel.actual-content {
width: 100%;
}
Plus I added the actual-content class to the elements containing the text content.
:root {
--ids_color_action_neutral_base: #3B3B3B;
--ids_color_bg_base: #FFFFFF;
--ids_color_bg_variant_01: #F1F2F4;
--ids_color_border_soft: #CFD1D3;
--ids_size_cornerRadius_button: 0.75rem;
--ids_size_cornerRadius_tags_01: 0.25rem;
--ids_size_border_small: 0.0625rem;
--ids_size_general_8x: 0.5rem;
--ids_size_general_20x: 1.25rem;
}
.ids-markdown {
font-family: sans-serif;
margin: 10px;
width: 100%;
}
.ids-markdown .tabs-ids {
display: flex;
flex-wrap: wrap;
background: none;
border: var(--ids_size_border_small) solid var(--ids_color_border_soft);
border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
border-top-left-radius: var(--ids_size_cornerRadius_button);
border-top-right-radius: var(--ids_size_cornerRadius_button);
margin: 20px;
}
.ids-markdown .tabs-ids .tabs-input {
position: absolute;
opacity: 0;
}
.ids-markdown .tabs-ids .tabs-label {
border-right: var(--ids_size_border_small) solid var(--ids_color_border_soft);
color: var(--ids_color_action_neutral_base);
cursor: pointer;
font-size: 18px;
font-weight: bold;
transition: background 0.1s, color 0.1s;
/* width: 100%; */
width: auto;
align-items: center;
display: flex;
filter: saturate(0);
justify-content: center;
padding: var(--ids_size_general_8x) var(--ids_size_general_20x);
}
.ids-markdown .tabs-ids .tabs-label img {
height: 1.625rem;
}
.ids-markdown .tabs-ids .tabs-label:hover,
.ids-markdown .tabs-ids .tabs-label:active {
filter: saturate(1);
}
.ids-markdown .tabs-ids .tabs-input:focus+.tabs-label {
z-index: 1;
}
.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label:nth-child(2) {
border-top-left-radius: var(--ids_size_cornerRadius_button);
}
.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label {
background-color: var(--ids_color_bg_variant_01);
color: var(--ids_color_action_neutral_base);
filter: saturate(1);
}
.ids-markdown .tabs-ids .tabs-panel {
background-color: var(--ids_color_bg_variant_01);
border-top: var(--ids_size_border_small) solid var(--ids_color_border_soft);
display: none;
order: 99;
}
.ids-markdown .tabs-ids .tabs-panel section {
background: var(--ids_color_bg_base);
padding: 20px 30px 30px;
}
.ids-markdown .tabs-ids .tabs-panel .pre {
border: unset;
border-radius: unset;
border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
margin: 0px;
width: 100%;
}
.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label+.tabs-panel {
display: block;
}
.tabs-panel.actual-content {
width: 100%;
}
<div class="ids-markdown">
<div class="tabs-ids">
<input class="tabs-input" id="tab-ids-1" name="tabs-ids" type="radio" checked>
<label class="tabs-label" for="tab-ids-1"><img src="https://cdn-icons-png.flaticon.com/128/546/546049.png" alt="Linux"></label>
<div class="tabs-panel actual-content">
<section>
<h1>Arlina Design</h1>
<p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
<p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise
through mutations.</p>
</section>
</div>
<input class="tabs-input" id="tab-ids-2" name="tabs-ids" type="radio">
<label class="tabs-label" for="tab-ids-2"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532546.png" alt="macOS"></label>
<div class="tabs-panel actual-content">
<section>
<h1>Idntheme</h1>
<p>Idntheme (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
<p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
</section>
</div>
<input class="tabs-input" id="tab-ids-3" name="tabs-ids" type="radio">
<label class="tabs-label" for="tab-ids-3"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532543.png" alt="Windows"></label>
<div class="tabs-panel actual-content">
<section>
<h1>Tekno Match</h1>
<p>Tekno Match (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to
tangerines, they tend to be easy to peel.</p>
</section>
</div>
</div>
</div>