How to show Text in not under/above Sliders or Images in Mobile View

Solved
daijobi
New Member
3 0 0

Hi there,

 

I purchased the Flow Theme, and now I got the problem that the Texts are shown under or above the sliders and images in mobile version. I want the mobile version look like on the desktop Version inside my uploaded the picture. Im looking forward for some advice and thank you very much. 

 

URL: www.ketofabrik.com

PW: borisforthewin!

 

 

:Desktop ViewDesktop ViewMobile ViewMobile View

 

Thank you and all the best.

0 Likes

This is an accepted solution.

Hello @daijobi,

1. Go to Online Store->Theme->Edit code
2. Asset->timber.scss.liquid->paste bellow code in bottom of file

@media only screen and (max-width: 767px) {
#shopify-section-1584481286531 .grid__item.homepage-featured-content-box {
	position: absolute;
	width: 50%;
	background: transparent;
	top: 5%;
	z-index: 1;
	left: 0;
}
}
@media only screen and (max-width: 600px) {
#shopify-section-1584481286531 .homepage-content--1584481286531 h2.homepage-sections--title {
	font-size: 28px;
}
#shopify-section-1584481286531 .grid__item.homepage-featured-content-box {
	top: 0;
}

.homepage-content--1584481286531 .featured-row__subtext p {
	font-size: 14px;
}
#shopify-section-1584481286531 .homepage-featured-box-btn {
padding: 5px 10px;font-size: 15px;
margin-top: 10px;
}
}
@media only screen and (max-width: 480px) {
#shopify-section-1584481286531 .homepage-featured-content-box-inner.shown-on-scroll.animated.fadeInUp {
	padding-right: 0;padding-left: 5px;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
daijobi
New Member
3 0 0

Hello @oscprofessional 

 

Thank you for quick reply! I pasted it there and it worked for exactly that component. see picuture. 

 

But one the other components it didnt work and when I use the same component (text on image) again for a new picture it didnt work. see pictures.

 

Can you help me that in future I have the option on my components to put text inside or above the images on mobile version. Or atleast that text is always inside image.

 

Edit: Would it be possible to be able to set the font size for mobile view?

 

Thank you again for quick reply! amazing!

 

All the best

 

 

slider componentslider componentnew image on text componentnew image on text componentyour code whcih workedyour code whcih worked

0 Likes

@daijobi,

Actually I added below id in code.

shopify-section-1584481286531

 If you remove above "shopify-section-1584481286531"  from css then It will applicable to all sliders..

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
daijobi
New Member
3 0 0

Hi @oscprofessional 

 

I have tryed that, but didnt work.

 

As soon as I removed "shopify-section-1584481286531" 

the whole page was messed up and I got a error message at the customization page

without #without #

Then I removed  with the "#" "#shopify-section-1584481286531"

Page looked better than before but still messed up.

delete with #delete with #

Please see screenshots

0 Likes

@daijobi,

For every slideshow we need to apply different css as per your image

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Lapash
New Member
2 0 0

I do not see >timber.scss.liquid-> when trying to make this edit.

0 Likes