CODE THEME PROBLEM

Solved
mildaulpyte
Tourist
15 0 2

Hello, I tried to change the mobile version slideshow using this link - https://community.shopify.com/c/Shopify-Discussion/How-to-move-slideshow-text-and-button-on-top-of-t... and now my website is broken!!! Omg help me, I don't know what to do. My shop is - www.glamuras.shop 

Screen Shot 2020-09-01 at 23.35.03.pngScreen Shot 2020-09-01 at 23.39.13.png

Accepted Solution (1)

Accepted Solutions
JHKCreate
Shopify Partner
2921 504 723

This is an accepted solution.

Solved, this code was not supposed to be used, I've commented it out:

  <style>

/* --tim: force slideshow resize instead of cropping 
.slideshow{
    height:auto; override the height value from the section.seettings 
}
.slideshow__image, 
.slideshow__link {
    position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
    padding-bottom:31.8%; /* here is the aspect ratio of images 
}/* --tim: force slideshow resize instead of cropping 
.slideshow{
    height:auto; /* override the height value from the section.seettings 
}
.slideshow__image, 
.slideshow__link {
    position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
    padding-bottom:31.8%; /* here is the aspect ratio of images 
}

@media screen and (max-width: 768px){
.index-section.slideshow-section{position: relative;}
.slideshow__mobile-text-container{	position: absolute;    top: 10%;    font-size: 12px;color: #fff; z-index: 9999; }
.slides__title+.slides__btn {    margin-top: 28px;    line-height: 20px;    min-height: 20px !important; }
}*/
  </stlye>
Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

Replies 19 (19)
JHKCreate
Shopify Partner
2921 504 723

Hi There!

You're missing a  "}" at the end of the CSS file, you probably did not close the media query bracket. Go ahead and paste the code here should this not work for you!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

mildaulpyte
Tourist
15 0 2

I think I deleted more, than I needed, because the code from the link was not wotking for me, and I tried to delete it, and then this happened, In error message it is said, that error is in 8719 line, but I don't have that line...

 Screen Shot 2020-09-01 at 23.56.02.png

JHKCreate
Shopify Partner
2921 504 723

Add "}" until they don't glow yellow anymore. Let's give it a try here.

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

mildaulpyte
Tourist
15 0 2

Didn't work

Screen Shot 2020-09-02 at 00.02.16.png

JHKCreate
Shopify Partner
2921 504 723

Oh not that much, please share your full code here, I'll adjust it for you.

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

mildaulpyte
Tourist
15 0 2

how to share the code? 

JHKCreate
Shopify Partner
2921 504 723

Copy all the lines of code, then click here:

JHKC_0-1598994562606.png

 

And paste all your code. 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

mildaulpyte
Tourist
15 0 2

Message cannot exceed 100,000 characters

 right: 0;
  bottom: 0;
  left: 0;
  background-color: $color-image-overlay;
  opacity: $opacity-image-overlay;
}

.custom-content {
  @include display-flexbox;
  @include align-items(stretch);
  @include flex-wrap(wrap);
  width: auto;
  margin-bottom: -$grid-gutter;
  margin-left: -$grid-gutter;

  @include media-query($small) {
    margin-bottom: -$grid-gutter-mobile;
    margin-left: -$grid-gutter-mobile;
  }
}

.custom__item {
  @include flex(0 0 auto);
  margin-bottom: $grid-gutter;
  padding-left: $grid-gutter;
  max-width: 100%;

  @include media-query($small) {
    @include flex(0 0 auto);
    padding-left: $grid-gutter-mobile;
    margin-bottom: $grid-gutter-mobile;

    &.small--one-half {
      @include flex(1 0 50%);
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  .collection-grid-item {
    margin-bottom: 0;
  }
}

.custom__item-inner {
  position: relative;
  display: block;
  text-align: left;
  max-width: 100%;
}

.custom__item-inner--video,
.custom__item-inner--collection,
.custom__item-inner--html {
  display: block;
}

.custom__item-inner--image {
  position: relative;
  margin: 0 auto;
}

.custom__image {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
}

/*================ Linklist ================*/

$linklist-spacing: 15px;
$linklist-spacing-small: 12px;

.custom__item.custom__item--link_list {
  @include media-query($small) {
    // Linklist is 100% width on mobile regardless of width setting
    flex: 1 0 100%;
    max-width: none;
  }
}

.custom__linklist {
  margin-left: -$linklist-spacing;
  margin-right: -$linklist-spacing;

  @include media-query($medium-up) {
    margin-left: -$linklist-spacing-small;
    margin-right: -$linklist-spacing-small;
  }
}

.custom__linklist-link {
  display: inline-block;
  padding: 10px $linklist-spacing;
  margin: 5px 0;

  @include media-query($medium-up) {
    padding: 3px $linklist-spacing-small;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/*================ Flex item alignment ================*/
.align--top-middle {
  text-align: center;
}

.align--top-right {
  text-align: right;
}

.align--middle-left {
  @include align-self(center);
}

.align--center {
  @include align-self(center);
  text-align: center;
}

.align--middle-right {
  @include align-self(center);
  text-align: right;
}

.align--bottom-left {
  @include align-self(flex-end);
}

.align--bottom-middle {
  @include align-self(flex-end);
  text-align: center;
}

.align--bottom-right {
  @include align-self(flex-end);
  text-align: right;
}

.newsletter-section {
  padding-top: $section-spacing;
}

.index-section--newsletter-background {
  background-color: $color-bg-alt;
}

.rich-text__heading--large {
  font-size: 1.4em; //24px default
}
.rich-text__heading--small {
  font-size: 0.88em; //16px default
}

.rich-text__text--large {
  font-size: em(floor($font-size-base * 1.15));
}
.rich-text__text--small {
  font-size: em(floor($font-size-base * 0.88));
}

.product-card {
  position: relative;

  &:hover,
  &:focus-within {
    .product-card__image-wrapper {
      opacity: 0.8;
    }

    .product-card__title {
      border-bottom-color: $color-text;
    }
  }
}

.product-card__image-with-placeholder-wrapper {
  position: relative;
}

.product-card__title {
  border-bottom: 1px solid transparent;
  display: inline;
  font-family: $font-stack-header;
  font-style: $font-style-header;
  font-weight: $font-weight-header;
}

$video-height-small: 475px;
$video-height-medium: 650px;
$video-height-large: 775px;

$z-index-video-image: 1;
$z-index-video: 2;
$z-index-video-text: 3;
$z-index-video-controls: 4;
$z-index-video-loader: 5;

$video-button-wrapper-size: 50px;
$video-pause-button-size: 34px;
$video-close-button-size: 30px;
$video-loader-size: 2.875rem;

$color-video-controls: #fff;
$color-video-controls-background: #000;

$ease-transition: cubic-bezier(0.44, 0.13, 0.48, 0.87);
$transition-controls-video: color 0.2s $ease-transition, background-color 0.2s $ease-transition;

[data-section-type="video-section"] {
  margin: 0 auto;

  @include media-query($small) {
    transition: width 0.6s $ease-transition, height 0.6s $ease-transition, padding 0.6s $ease-transition;
  }
}

.video-section-wrapper {
  position: relative;
  display: flex;
  @include align-items(center);
  @include justify-content(center);
  width: 100%;
  height: 100%;

  @include media-query($medium-up) {
    overflow: hidden;
  }

  @include media-query($small) {
    overflow: visible !important;
    &.video-is-playing {
      margin: 0;
    }

    &.video-is-loaded {
      transition: margin 0.6s $ease-transition;
    }
  }
}

.video-section-wrapper--small.video-section-wrapper--min-height {
  min-height: $video-height-small - 300;

  @include media-query($medium-up) {
    min-height: $video-height-small;
  }
}
.video-section-wrapper--medium.video-section-wrapper--min-height {
  min-height: $video-height-medium - 380;

  @include media-query($medium-up) {
    min-height: $video-height-medium;
  }
}

.video-section-wrapper--large.video-section-wrapper--min-height {
  min-height: $video-height-large - 400;

  @include media-query($medium-up) {
    min-height: $video-height-large;
  }
}

.video-background-wrapper--no-overlay {
  background-color: rgba($color-image-overlay, 0.2);
}

/*================ Video text ================*/
.video__text-content {
  text-align: center;
  position: relative;
  width: 100%;
  top: 20px;
  opacity: 1;
  transition: all 0.6s $ease-transition;
  transition-delay: 0.3s;
  z-index: $z-index-video-text;
  padding: 40px 0;

  .video-is-playing & {
    display: none;
  }

  .video-is-loaded &,
  .no-js & {
    @include transform(translateY(-20px));
  }

  .video-is-loaded &,
  .no-js & {
    &::after {
      opacity: 0;
      visibility: hidden;
      content: none;
    }
  }
}

.video__title {
  color: $color-overlay-title-text;

  .video-is-paused & {
    display: none;
  }
}

/*================ Video styles ================*/
.video {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: $z-index-video;
}

.video--background {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in;
}

.autoplay .video-is-loaded .video--background {
  display: block;
  visibility: visible;
  opacity: 1;
}

.video--image_with_play {
  display: none;
  opacity: 0;
  visibility: none;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in;

  .video-is-playing &,
  .video-is-paused & {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}

/*================ Video control buttons ================*/
.video-control {
  display: none;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: $z-index-video-controls;
  transition: all 0.1s ease-out;
}

.video-control__play-wrapper {
  display: none;
  height: $video-button-wrapper-size;

  @include media-query($medium-up) {
    display: block;
  }
}

.video-control__play-wrapper-mobile {
  display: block;
  height: $video-button-wrapper-size;
  position: absolute;
  top: calc(100% - 50px / 2);
  left: calc(50% - 50px / 2);

  @include media-query($medium-up) {
    display: none;
  }
}

.video-control__play-wrapper--with-text {
  margin-top: $grid-gutter;
}

.video-control__play {
  display: flex;
  justify-content: center;
  visibility: visible;
  opacity: 1;
  width: $video-button-wrapper-size;
  height: $video-button-wrapper-size;
  border-radius: $video-button-wrapper-size / 2;
  position: relative;
  margin: 0 auto;
  padding: 5px;
  pointer-events: none;

  .video-background-wrapper & {
    top: 50%;
    @include transform(translateY(-50%));
  }

  .icon {
    opacity: 0.5;
  }

  .video-is-loaded & {
    pointer-events: auto;

    .icon {
      opacity: 1;
    }
  }

  .video-is-playing & {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}

// Video loader shown when initializing
.video-control__play::before {
  content: '';
  display: block;
  width: $video-loader-size;
  height: $video-loader-size;
  position: absolute;
  margin-left: - $video-loader-size / 2;
  border-radius: 50%;
  border: 2px solid white;
  border-top-color: transparent;
  @include animation(spin 0.65s infinite linear);
  transition: all 0.1s ease-out 0.5s;
  z-index: $z-index-video-loader;
  top: 1px;
  left: 50%;
  opacity: 0.5;

  .video-is-loaded &,
  .video-is-playing &,
  .video-is-paused & {
    content: none;
    display: none;
  }
}

.video-control__close-wrapper {
  display: none;
  width: $video-button-wrapper-size;
  height: $video-button-wrapper-size;
  position: absolute;
  top: 0;
  right: 0;
  outline: none;
  z-index: 3;

  .video-is-playing &,
  .video-is-paused & {
    display: block;
  }
}

.video-control__close {
  position: relative;
  width: $video-close-button-size;
  height: $video-close-button-size;
  margin: 0 auto;
  font-size: 14px;
  line-height: 27px;
  border-radius: $video-close-button-size / 2;
  background-color: $color-video-controls;
  color: $color-video-controls-background;

  .video-control__close-wrapper:hover &,
  .video-control__close-wrapper:focus & {
    outline: auto 5px -webkit-focus-ring-color;
    opacity: 0.7;
  }

  .video-is-playing &,
  .video-is-paused & {
    display: inline-block;
    visibility: visible;
    opacity: 1;
  }

  .icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
  }
}

.video__pause {
  position: absolute;
  top: 0;
  right: 0;
  z-index: $z-index-video-text;
  width: $video-button-wrapper-size;
  height: $video-button-wrapper-size;
  padding: 0;
  border: none;
  background-color: transparent;
  transition: $transition-controls-video;

  @include media-query($small) {
    display: none;
  }

  .video-is-playing & {
    display: none;
  }

  .icon {
    position: relative;
    color: rgba($color-video-controls, 0.5);
    transition: $transition-controls-video;
  }

  &:hover,
  &:focus {
    outline: none;
    .icon {
      color: $color-video-controls;
    }
  }

  .icon-pause {
    width: 12px;
    height: 12px;
    top: 11px;
  }

  .icon-play {
    width: 16px;
    height: 16px;
    top: 9px;
  }
}

.video__pause-resume,
.video__pause-stop {
  height: $video-pause-button-size;
  width: $video-pause-button-size;
  margin: 0 auto;
  justify-content: center;
  background-color: rgba($color-video-controls-background, 0.4);

  .video__pause:hover &,
  .video__pause:focus & {
    background-color: rgba($color-video-controls-background, 0.75);
  }

  .video__pause:focus & {
    outline: auto 5px -webkit-focus-ring-color;
  }
}

.video__pause-stop {
  display: flex;

  .is-paused & {
    display: none;
  }
}

.video__pause-resume {
  display: none;

  .is-paused & {
    display: flex;
  }
}

/*================ Overlay ================*/
.video__overlay {
  @include overlay(3);
}

.video-is-playing .video__overlay {
  opacity: 0;

  &:before {
    content: none;
  }
}

/*================ Fallback images ================*/
.video__image {
  transition: opacity 0.8s $ease-transition;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  z-index: $z-index-video-image;

  .video-background-wrapper & {
    @include media-query($medium-up) {
      opacity: 0;
    }
  }

  .no-autoplay & {
    opacity: 1;
  }
}

.product-recommendations__inner {
  padding: $section-spacing-small 0;

  @include media-query($medium-up) {
    padding: $section-spacing 0;
  }
}

$max-height-disclosure: 300px;
$min-height-disclosure: 92px;

.disclosure {
  position: relative;
}

.disclosure__toggle {
  @extend select;
  white-space: nowrap;
}

.disclosure-list {
  background-color: $color-text-field;
  border: 1px solid $color-border-form;
  bottom: 115%;
  padding: 11px 0px;
  position: absolute;
  display: none;
  min-height: $min-height-disclosure;
  max-height: $max-height-disclosure;
  overflow-y: auto;
  border-radius: $border-radius;
}

.disclosure-list--visible {
  display: block;
}

.disclosure-list__item {
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  padding: 5px 45px 4px 15px;
  text-align: left;

  &:active {
    background-color: transparentize($color-btn-primary, 0.8);
  }
}

.disclosure-list__option {
  color: $color-text-field-text;

  &:focus,
  &:hover {
    // !important needed to override link styles
    color: $color-text-field-text !important;
    border-bottom: 1px solid $color-text-field-text;
  }
}

.disclosure-list__item--current .disclosure-list__option {
  border-bottom: 1px solid $color-text-field-text;
}

/*================ Selectors ================*/

.selectors-form {
  @include display-flexbox();
  @include justify-content(center);
  @include flex-wrap(wrap);
  margin-bottom: $footer-spacing-small;

  @include media-query($medium-up) {
    @include justify-content(flex-start);
    @include flex-wrap(nowrap);
  }
}

.selectors-form__item {
  padding-bottom: $footer-spacing-small;
  margin: 0 $footer-spacing-extra-small;

  @include media-query($medium-up) {
    padding-bottom: 0;

    &:first-of-type {
      margin-left: 0;
    }
    @media screen and (max-width: 749px) {
 .index-section.slideshow-section {
	display: flex;
	flex-direction: column;
}
#flexslider--slider {
	order: 2;
}
.slider__controls-container {
	order: 3;
}
.slideshow__mobile-text-container {
	order: 1;
mildaulpyte
Tourist
15 0 2

I added the lines from 8000 till 8713, I removed something from the end of the code I think, also I tried to do something on the theme liquid too, so I'm adding the code from there also

 

<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_button }}">
  <link rel="canonical" href="{{ canonical_url }}">

  {%- if settings.favicon != blank -%}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {%- endif -%}

  {%- capture seo_title -%}
    {%- if request.page_type == 'search' and search.performed == true -%}
      {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
    {%- else -%}
      {{ page_title }}
    {%- endif -%}
    {%- if current_tags -%}
      {%- assign meta_tags = current_tags | join: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      &ndash; {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      &ndash; {{ shop.name }}
    {%- endunless -%}
  {%- endcapture -%}
  <title>{{ seo_title | strip }}</title>

  {%- if page_description -%}
    <meta name="description" content="{{ page_description | escape }}">
  {%- endif -%}

  {% include 'social-meta-tags' %}

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  <script>
    var theme = {
      breakpoints: {
        medium: 750,
        large: 990,
        widescreen: 1400
      },
      strings: {
        addToCart: {{ 'products.product.add_to_cart' | t | json }},
        soldOut: {{ 'products.product.sold_out' | t | json }},
        unavailable: {{ 'products.product.unavailable' | t | json }},
        regularPrice: {{ 'products.product.regular_price' | t | json }},
        salePrice: {{ 'products.product.sale_price' | t | json }},
        sale: {{ 'products.product.on_sale' | t | json }},
        fromLowestPrice: {{ 'products.product.from_lowest_price_html' | t: lowest_price: '[price]' | json }},
        vendor: {{'products.product.vendor' | t | json }},
        showMore: {{ 'general.filters.show_more' | t | json }},
        showLess: {{ 'general.filters.show_less' | t | json }},
        searchFor: {{ 'general.search.search_for' | t | json }},
        addressError: {{ 'sections.map.address_error' | t | json }},
        addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
        addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
        authError: {{ 'sections.map.auth_error_html' | t | json }},
        newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }},
        external: {{ 'general.accessibility.link_messages.external' | t | json }},
        newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }},
        removeLabel: {{ 'cart.label.remove' | t: product: '[product]' | json }},
        update: {{ 'cart.label.update' | t | json }},
        quantity: {{ 'cart.label.quantity' | t | json }},
        discountedTotal: {{ 'cart.label.discounted_total' | t | json }},
        regularTotal: {{ 'cart.label.regular_total' | t | json }},
        priceColumn: {{ 'cart.label.price_column' | t | json }},
        quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
        cartError: {{ 'cart.general.cart_error' | t | json }},
        removedItemMessage: {{ 'cart.general.removed_item_html' | t: quantity: '[quantity]', link: '[link]' | json }},
        unitPrice: {{ 'products.product.unit_price_label' | t | json }},
        unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
        oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
        otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
        quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }},
        products: {{ 'general.search.products' | t | json }},
        loading: {{ 'general.search.loading' | t | json }},
        number_of_results: {{ 'general.search.number_of_results' | t: result_number: '[result_number]', results_count: '[results_count]' | json }},
        number_of_results_found: {{ 'general.search.number_of_results_found' | t: results_count: '[results_count]' | json }},
        one_result_found: {{ 'general.search.one_result_found' | t | json }}
      },
      moneyFormat: {{ shop.money_format | json }},
      moneyFormatWithCurrency: {{ shop.money_with_currency_format | json }},
      settings: {
        predictiveSearchEnabled: {{ settings.predictive_search_enabled | json }},
        predictiveSearchShowPrice: {{ settings.predictive_search_show_price | json }},
        predictiveSearchShowVendor: {{ settings.predictive_search_show_vendor | json }}
      }
    }

    document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  </script>

  {%- if request.page_type contains 'customers/' -%}
    <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
  {%- endif -%}

  <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
  <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

  {{ content_for_header }}
</head>

<body class="template-{{ request.page_type | handle }}">

  <a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

  {%- if settings.enable_ajax -%}
    {% include 'cart-popup' %}
  {%- endif -%}

  {% section 'header' %}

  <div class="page-container drawer-page-content" id="PageContainer">

    <main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% section 'footer' %}

    <div id="slideshow-info" class="visually-hidden" aria-hidden="true">
      {{- 'sections.slideshow.navigation_instructions' | t -}}
    </div>

  </div>

  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
  </ul>
</body>
</html>
/* --tim: force slideshow resize instead of cropping */
.slideshow{
    height:auto; /* override the height value from the section.seettings */
}
.slideshow__image, 
.slideshow__link {
    position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
    padding-bottom:31.8%; /* here is the aspect ratio of images */
}/* --tim: force slideshow resize instead of cropping */
.slideshow{
    height:auto; /* override the height value from the section.seettings */
}
.slideshow__image, 
.slideshow__link {
    position:relative;
}
.slideshow__image:not(.ratio-container),
.ratio-container:after {
    padding-bottom:31.8%; /* here is the aspect ratio of images */
}@media screen and (max-width: 768px){
.index-section.slideshow-section{position: relative;}
.slideshow__mobile-text-container{	position: absolute;    top: 10%;    font-size: 12px;color: #fff; z-index: 9999; }
.slides__title+.slides__btn {    margin-top: 28px;    line-height: 20px;    min-height: 20px !important; }
}
}