Video play button is not alight to center In mobile view

Tourist
30 0 1

lifty.com

F3E46981-C839-4A92-830D-7C526DF0AB2C.png

 

0 Likes
Shopify Partner
917 129 123

Hello ,

Add this code at the bottom of Theme-> edit code-> assets -> theme.scss.liquid

.icon.icon-play {
    margin-top: 8px;
}
Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
0 Likes
Highlighted
Tourist
30 0 1
Hi,

I have added the code.

The page is destoyed.
0 Likes
Shopify Partner
917 129 123

can you share screen shot of code.

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
0 Likes
Tourist
30 0 1

I made the changes around "responsive show/hide helper. And I removed your script already. The pages destroyed.

/*================ Responsive Show/Hide Helper ================*/

0 Likes
Tourist
30 0 1
/*================ Media Query Mixin ================*/ @mixin media-query($media-query) { $breakpoint-found: false; @each $breakpoint in $grid-breakpoints { $name: nth($breakpoint, 1); $declaration: nth($breakpoint, 2); @IF $media-query == $name and $declaration { $breakpoint-found: true; @media only screen and #{$declaration} { @content; } } } @IF $breakpoint-found == false { @warn 'Breakpoint "#{$media-query}" does not exist'; } } /*================ Responsive Show/Hide Helper ================*/ @mixin responsive-display-helper($grid-breakpoint-type: '') { // sass-lint:disable no-important .#{$grid-breakpoint-type}show { display: block !important; } .#{$grid-breakpoint-type}hide { display: none !important; } } /*================ Responsive Text Alignment Helper ================*\ @mixin responsive-text-align-helper($grid-breakpoint-type: '') { // sass-lint:disable no-important .#{$grid-breakpoint-type}text-left { text-align: left !important; } .#{$grid-breakpoint-type}text-right { text-align: right !important; } .#{$grid-breakpoint-type}text-center { text-align: center !important; } } @mixin placeholder-text($color: $color-text-field-text, $opacity: 0.6) { color: $color; opacity: $opacity; } @mixin error-placeholder-text($color: $color-error-input-text, $opacity: 0.5) { color: $color; opacity: $opacity; } @mixin transform($transform) { @include prefix(transform, $transform, ms webkit spec); } @mixin transition($transition) { @include prefix(transition, $transition, ms webkit spec); } @mixin gradient($side, $from, $to) { background: -ms-linear-gradient($side, $from 0%, $to 100%); background: linear-gradient(to $side, $from 0%, $to 100%); } @mixin spinner($size: 20px, $color: $color-btn-primary-text) { content: ''; display: block; width: $size; height: $size; position: absolute; margin-left: - $size / 2; margin-top: - $size / 2; border-radius: 50%; border: 3px solid $color; border-top-color: transparent; } @mixin visually-hidden() { // sass-lint:disable no-important position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } @mixin visually-shown() { // sass-lint:disable no-important position: inherit !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; } @mixin overlay($z-index: null) { &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: $color-image-overlay; opacity: $opacity-image-overlay; @IF ($z-index) { z-index: $z-index; } } } @mixin default-focus-ring() { outline: 1px dotted #212121; outline: 5px auto -webkit-focus-ring-color; }
0 Likes
Shopify Partner
917 129 123

That is not script its just simple CSS ,  You have to add this on bottom of css only.

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
0 Likes
Tourist
30 0 1


I have added the script to the bottom, but still negative result.

2019-09-10_200414.png

Here is my expected position. Move the play button upward to the center.
2019-09-10_200048.png

0 Likes
Tourist
30 0 1
may i have the update? seek for your help since it is impacting UX of customers.
0 Likes