2 blank lines for some seconds of starting at my website

Highlighted
New Member
5 0 0

Hello,

 

i have a problem with my website when you go to Annotation 2020-03-27 024636.png  then you will see at the startup that there will b 2 lines alike this: Annotation 2020-03-27 024454.png in the background image. Please help me.

 

Best regards

0 Likes
New Member
5 0 0

the line of the middle is not a problem only the 2 blank lines make it look buggy but the grey middle line is normal(charging line)

0 Likes
Highlighted
New Member
5 0 0

you can only see it in one second at the startup but it is very annoying

0 Likes
Highlighted
Pathfinder
76 7 24

Hi @ShopiTeam ,

I don't think it looks like an issue. For a user, it seems like a small feature.
Saying that I think it's caused but the padding of the banner text. You will have to write a small script to hide it on load.

0 Likes
Highlighted
New Member
5 0 0

what type of scripts cause idk where to start

0 Likes
Highlighted
Shopify Expert
540 37 110

It looks like they're coming from the padding set on those white boxes:

Screen Shot 2020-03-27 at 8.54.02 AM.jpg

 

Couple ideas for solutions:

 

1) Scrap the animated slider and go with a static hero banner instead. (people don't care enough to stay in one spot and go through the whole animation anyway, they just want to find what they're looking for... check the average time on page in your analytics if you want to see how long people stay on a page).

 

2) Make the background image a little darker (black layer on top with semi-opacity), remove the white background property from the boxes, and make the text white.

 

3) If there's a callback function in the slider where you can execute code when the slider loads, then you can hide those white boxes, and then display them when the slider loads.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes
Highlighted
New Member
5 0 0

The white background boxes in reality are from me i added theses paddings to mke more pretty in reality there was only some text:

Here are some text i changed in scss file:

 

// Title animations

.fading-images--1575485076044 .fading-images-overlay__title {
  font-size: 20.5px;
  background-color: white;
  color: black;
  display: inline-block;
  margin-bottom: 2px;
  margin-top: 2px;
  border-top-width: 4px;
  border-bottom-width: 4px;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 4px;
  padding-top: 4px;
}


@media only screen and (min-width: 590px){
.fading-images--1575485076044 .fading-images-overlay__title {
  font-size: 41px!important;
  background-color: white;
  color: black;
  display: inline-block;
  margin-bottom: 2px;
  margin-top: 2px;
  border-top-width: 4px;
  border-bottom-width: 4px;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 4px;
  padding-top: 4px;
}}

This is the changes i added after that it as showed me the background i was happy but the startup have 2 lines what i can add in this to hide them whithout removing the white text background. If you do google inspect you will find back theses: .fading-images--1575485076044 .fading-images-overlay__title in css

0 Likes
Highlighted
Pathfinder
76 7 24

Hi @ShopiTeam ,

Could you try removing padding-top and padding-bottom. Define a line-height instead.

0 Likes