8 column layout in multicolumn section

[sebastian502]

Hi,

I am trying to get 8 column layout on my homepage add almost have it working but i keep maxing out at 7 columns.  Is there something I need to change in base css?

The code for the Dawn theme version 15 for the sections/multicolumn.liquid is follows:

{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

<div class="multicolumn background-{{ section.settings.background_style }}{% if section.settings.title == blank %} no-heading{% endif %}">
<div class="page-width">
<div class="title-wrapper-with-link title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
<h2 class="title">
{{ section.settings.title | escape }}
</h2>
{%- if section.settings.button_label != blank and section.settings.swipe_on_mobile -%}
<a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">{{ section.settings.button_label | escape }}</a>
{%- endif -%}
</div>
<slider-component class="slider-mobile-gutter">
<ul class="multicolumn-list grid grid--1-col{% if section.blocks.size > 3 and section.settings.image_width != 'full' %} grid--2-col-tablet grid--4-col-desktop{% elsif section.blocks.size > 3 and section.settings.image_width == 'full' %} grid--2-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile and section.blocks.size > 1 %} slider slider--mobile grid--peek{% endif %}"
id="Slider-{{ section.id }}"
role="list"
>
{%- liquid
assign highest_ratio = 0
for block in section.blocks
if block.settings.image.aspect_ratio > highest_ratio
assign highest_ratio = block.settings.image.aspect_ratio
endif
endfor
-%}
{%- for block in section.blocks -%}
<li class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}" {{ block.shopify_attributes }}>
<div class="multicolumn-card">
{%- if block.settings.image != blank -%}
{% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
{% assign spaced_image = true %}
{% endif %}
<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">


{%- if block.settings.image_title_link != blank -%}
<a href="{{ block.settings.image_title_link }}"
class="media media--transparent media--{{ section.settings.image_ratio }}"
{% if section.settings.image_ratio == 'adapt' %}
style="padding: 0 0 {{ 1 | divided_by: highest_ratio | times: 100 }}% 0;"
{% endif %}>
{%- else -%}
<div class="media media--transparent media--{{ section.settings.image_ratio }}"
{% if section.settings.image_ratio == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
{% endif %}>
{%- endif -%}
<img
srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
{%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}"
src="{{ block.settings.image | img_url: '550x' }}"
sizes="(min-width: 750px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
(min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
calc(100vw - 30px)"
alt="{{ block.settings.image.alt }}"
height="{{ block.settings.image.height }}"
width="{{ block.settings.image.width }}"
loading="lazy"
>
{%- if block.settings.image_title_link != blank -%}
</a>
{%- else -%}
</div>
{%- endif -%}
</div>
{%- endif -%}

{%- if block.settings.image_title_link != blank -%}
<a href="{{ block.settings.image_title_link }}" class="multicolumn-card__info">
{%- else -%}

<div class="multicolumn-card__info">
{%- endif -%}

{%- if block.settings.title != blank -%}
<h3>{{ block.settings.title | escape }}</h3>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="rte">{{ block.settings.text }}</div>
{%- endif -%}


{%- if block.settings.image_title_link != blank -%}
</a>
{%- else -%}
</div>
{%- endif -%}
</div>
</li>
{%- endfor -%}
</ul>

{%- if section.settings.swipe_on_mobile -%}
<div class="slider-buttons no-js-hidden medium-hide{% if section.blocks.size < 2 %} small-hide{% endif %}">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
<div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
{%- if section.settings.button_label != blank -%}
<a class="button button--primary"{% if section.settings.button_link == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
{{ section.settings.button_label | escape }}
</a>
{%- endif-%}
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.multicolumn.name",
"class": "spaced-section spaced-section--full-width",
"tag": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Multicolumn",
"label": "t:sections.multicolumn.settings.title.label"
},
{
"type": "select",
"id": "image_width",
"options": [
{
"value": "third",
"label": "t:sections.multicolumn.settings.image_width.options__1.label"
},
{
"value": "half",
"label": "t:sections.multicolumn.settings.image_width.options__2.label"
},
{
"value": "full",
"label": "t:sections.multicolumn.settings.image_width.options__3.label"
}
],
"default": "full",
"label": "t:sections.multicolumn.settings.image_width.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
},
{
"value": "circle",
"label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
}
],
"default": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.label"
},
{
"type": "select",
"id": "column_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
}
],
"default": "left",
"label": "t:sections.multicolumn.settings.column_alignment.label"
},
{
"type": "select",
"id": "background_style",
"options": [
{
"value": "none",
"label": "t:sections.multicolumn.settings.background_style.options__1.label"
},
{
"value": "primary",
"label": "t:sections.multicolumn.settings.background_style.options__2.label"
},
{
"value": "secondary",
"label": "t:sections.multicolumn.settings.background_style.options__3.label"
}
],
"default": "primary",
"label": "t:sections.multicolumn.settings.background_style.label"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.multicolumn.settings.button_label.label"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.multicolumn.settings.button_link.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
}
],
"blocks": [
{
"type": "column",
"name": "t:sections.multicolumn.blocks.column.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.multicolumn.blocks.column.settings.image.label"
},
{
"type": "text",
"id": "title",
"default": "Column",
"label": "t:sections.multicolumn.blocks.column.settings.title.label"
},
{
"type": "richtext",
"id": "text",
"default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"label": "t:sections.multicolumn.blocks.column.settings.text.label"
},
{
"type": "url",
"id": "image_title_link",
"label": "Image/Title Link"
}
]
}
],
"presets": [
{
"name": "t:sections.multicolumn.presets.name",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}

[AK_Design_Dev]

Hello @sebastian502 
please share url

[sebastian502]

https://baxterandash-com.myshopify.com/

[AK_Design_Dev]

please share pass

[sebastian502]

password removed

[AK_Design_Dev]

you want this type 

[sebastian502]

correct

[AK_Design_Dev]

then you need to add css 

[sebastian502]

The css changes to section/multicolumn.css :

.multicolumn .title {

  margin: 0;

}

.multicolumn.no-heading .title {

  display: none;

}

@media screen and (max-width: 749px) {

  .multicolumn.no-heading.background-secondary {

    padding-top: 5rem;

  }

}

@media screen and (min-width: 750px) {

  .multicolumn.no-heading:not(.background-secondary) {

/*     margin-top: calc(6rem + var(--page-width-margin)); */

    margin-top: 0;

    margin-bottom: 0;

  }

}

.multicolumn.no-heading:not(.background-secondary) .title-wrapper-with-link {

margin: 0;

}

.multicolumn.background-secondary .title-wrapper-with-link {

  margin-top: 0;

}

@media screen and (max-width: 749px) {

  .multicolumn .title-wrapper-with-link {

    margin-bottom: 3rem;

  }

}

.multicolumn-card__image-wrapper--third-width {

  width: 33%;

}

.multicolumn-card__image-wrapper--half-width {

  width: 50%;

}

.multicolumn-list__item.center

  .multicolumn-card__image-wrapper:not(.multicolumn-card__image-wrapper--full-width),

.multicolumn-list__item:only-child {

  margin-left: auto;

  margin-right: auto;

}

.multicolumn .button {

  margin-top: 1.5rem;

}

@media screen and (min-width: 750px) {

  .multicolumn .button {

    margin-top: 4rem;

  }

}

.multicolumn-list {

  margin-bottom: 0;

  margin-top: 0;

  padding: 0;

}

.multicolumn-list__item:only-child {

  max-width: 36rem;

}

.multicolumn:not(.background-none) .multicolumn-card {

  background: rgba(var(--color-foreground), 0.04);

  height: 100%;

}

.multicolumn.background-secondary .multicolumn-card {

  background: rgb(var(--color-background));

}

.multicolumn.background-secondary {

  padding: 4rem 0 5rem;

}

@media screen and (min-width: 750px) {

  .multicolumn.background-secondary {

    padding: calc(4rem + var(--page-width-margin)) 0

      calc(5rem + var(--page-width-margin));

  }

}

@media screen and (max-width: 749px) {

  .multicolumn.background-secondary .slider-buttons {

    margin-bottom: -2rem;

  }

}

.multicolumn:not(.background-secondary) {

  margin: 0;

}

@media screen and (min-width: 750px) {

  .multicolumn:not(.background-secondary) {

    margin: calc(5rem + var(--page-width-margin)) 0;

  }

}

.multicolumn-list h3 {

  line-height: 1.5;

}

.multicolumn-list h3,

.multicolumn-list p {

  margin: 0;

}

.multicolumn-card-spacing {

  padding-top: 2.5rem;

  margin-left: 2.5rem;

  margin-right: 2.5rem;

}

.multicolumn-card__info > :nth-child(2) {

  margin-top: 0rem;

}

.multicolumn-list__item.center .media--adapt,

.multicolumn-list__item .media--adapt img {

  width: auto;

}

.multicolumn-list__item.center .media--adapt img {

  left: 50%;

  transform: translateX(-50%);

}

@media screen and (max-width: 749px) {

  .multicolumn .page-width {

    padding: 0;

  }

  .multicolumn-list {

    margin: 0;

    width: 100%;

  }

  .multicolumn-list__item {

    margin: 0 0 1rem;

    padding: 0;

  }

  .multicolumn-list:not(.slider) {

    padding-left: 1.5rem;

    padding-right: 1.5rem;

  }

  .multicolumn-list.slider .multicolumn-list__item {

    width: calc(100% - 3rem);

  }

  .multicolumn-list.slider .multicolumn-list__item + .multicolumn-list__item {

    padding-left: 0.5rem;

  }

}

@media screen and (min-width: 750px) {

  .multicolumn-list.slider,

  .multicolumn-list.grid--4-col-desktop {

    padding: 0;

  }

  .multicolumn-list__item,

  .grid--4-col-desktop .multicolumn-list__item {

    padding-bottom: 0;

  }

  .grid--2-col-tablet .multicolumn-list__item {

    margin-top: 1rem;

    max-width: 50%;

  }

  .background-none .grid--2-col-tablet .multicolumn-list__item {

    margin-top: 4rem;

  }

  .grid--2-col-tablet .multicolumn-list__item:nth-of-type(-n + 2) {

    margin-top: 0;

  }

}

@media screen and (min-width: 990px) {

  .grid--2-col-tablet.grid--4-col-desktop .multicolumn-list__item {

    max-width: 25%;

  }

  .grid--2-col-tablet.grid--4-col-desktop

    .multicolumn-list__item:nth-of-type(-n + 4) {

    margin-top: 0;

  }

}

.background-none .multicolumn-card-spacing {

  padding: 0;

  margin: 0;

}

.multicolumn-card__info {

  padding: 2.5rem 2.5rem;

}

.background-none .multicolumn-card__info {

  padding-top: 0;

  padding-left: 0;

  padding-right: 0;

}

.background-none .multicolumn-card__image-wrapper + .multicolumn-card__info {

  padding-top: 2.5rem;

}

.background-none .slider .multicolumn-card__info {

  padding-left: 0.5rem;

}

.background-none

  .slider

  .multicolumn-card__image-wrapper

  + .multicolumn-card__info {

  padding-left: 1.5rem;

}

.background-none

  .multicolumn-list:not(.slider)

  .center

  .multicolumn-card__info {

  padding-left: 2.5rem;

  padding-right: 2.5rem;

}

@media screen and (min-width: 750px) {

  .background-none .multicolumn-card__image-wrapper {

    margin-left: 1.5rem;

    margin-right: 1.5rem;

  }

  .background-none .multicolumn-list .multicolumn-card__info,

  .background-none

    .multicolumn-list:not(.slider)

    .center

    .multicolumn-card__info {

    padding-left: 1.5rem;

    padding-right: 1.5rem;

  }

  .banner--mobile-bottom .slideshow__text.banner__box.slideshow__text--center:empty {

    display: none;

}

[sebastian502]

i tried to post my css changes but its not showing

[AK_Design_Dev]

You need max css in store

[sebastian502]

I do not understand max css?