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-the-slideshow-on/td-p/631312/page/2 and now my website is broken!!! Omg help me, I don’t know what to do. My shop is - www.glamuras.shop
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!
Add “}” until they don’t glow yellow anymore. Let’s give it a try here.
Oh not that much, please share your full code here, I’ll adjust it for you.
Cheers!
how to share the code?
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;
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
{%- if settings.favicon != blank -%}
{%- 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: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
– {{ 'general.meta.page' | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
– {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}
{%- if page_description -%}
{%- endif -%}
{% include 'social-meta-tags' %}
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
{%- if request.page_type contains 'customers/' -%}
{%- endif -%}
{{ content_for_header }}
{{ 'general.accessibility.skip_to_content' | t }}
{%- if settings.enable_ajax -%}
{% include 'cart-popup' %}
{%- endif -%}
{% section 'header' %}
{% section 'footer' %}
{{- 'sections.slideshow.navigation_instructions' | t -}}
- {{ 'general.accessibility.refresh_page' | t }}
- {{ 'general.accessibility.selection_help' | t }}
/* --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; }
}
}
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.
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 
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!
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!
Solved, this code was not supposed to be used, I’ve commented it out:
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; }