Solved

What caused my Shopify code theme to break after editing?

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)
JHKCreate
Shopify Expert
3571 639 916

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

View solution in original post

Replies 19 (19)

JHKCreate
Shopify Expert
3571 639 916

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
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 Expert
3571 639 916

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
mildaulpyte
Tourist
15 0 2

Didn't work 😞

Screen Shot 2020-09-02 at 00.02.16.png

JHKCreate
Shopify Expert
3571 639 916

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
mildaulpyte
Tourist
15 0 2

how to share the code? 

JHKCreate
Shopify Expert
3571 639 916

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
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; }
}
} 

 

JHKCreate
Shopify Expert
3571 639 916

Indeed should have thought about the limit. Would you mind sharing your store's URL? I will request collaborator access and fix that for you on the spot. 

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
mildaulpyte
Tourist
15 0 2

thank you, www.glamuras.shop, could you also fix the slide show mobile version(i want slide show to look exact as desktop version, text on the photo and a button, not bellow), because I'm afraid that I can make mistake again 😞 

mildaulpyte
Tourist
15 0 2
JHKCreate
Shopify Expert
3571 639 916

Fixed the CSS for you, website is back to normal. As for the slideshow modification I did what I could within the time I can spare, let me know!

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
mildaulpyte
Tourist
15 0 2

Thank you so much, you are the best, but now at the end of the page there are weird text lines.

 IMG_8357.PNG

JHKCreate
Shopify Expert
3571 639 916

Fixed, something was messed up in liquid.theme. All Good Then 🙂 Please mark the answers as solved so we can help the community know your errors have been addressed.

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
mildaulpyte
Tourist
15 0 2

Thank you text lines are gone, but now button from the slideshow is missing 😞

 IMG_8358.PNG

mildaulpyte
Tourist
15 0 2

same in desktop Screen Shot 2020-09-02 at 00.50.07.png

JHKCreate
Shopify Expert
3571 639 916

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

fabrics
Excursionist
20 0 33

Does anybody know where to put this code on the Debut theme.css?  It is supposed to stop my lootly icon from being pushed to the bottom of the page.  Not sure if it matters where on the page I put this code.  I would appreciate any help please.   Thank you. 

 

#PageContainer { transform: none !important; }