arrow-right cart chevron-down chevron-left chevron-right chevron-up close menu minus play plus search share user email pinterest facebook instagram snapchat tumblr twitter vimeo linkedin youtube subscribe dogecoin dwolla forbrugsforeningen litecoin amazon_payments american_express bitcoin cirrus discover fancy interac jcb master paypal stripe visa diners_club dankort maestro trash

Shopping Cart


qwiq Shopify Section Tips & Tricks

Making your Typewriter section taller


If you've installed qwiqode's Typewriter Effect Shopify section and are using a background image, you may want to show more of the image than what the section allows.

Due to Shopify's limitation of the "range" input field in the Theme Editor, you can only set a maximum of 100 pixels for both top and bottom padding. 

So if you want more than that, you can install our CSS section (it’s free) and then add the section to that page. You could also just use the new built-in CSS block that Shopify now provides for each section.

Once you’ve completed that step of installed the CSS section, you can paste the code below into the textfield of the CSS section.

Of course, you can change the pixel values higher or lower to get the right look and feel that you desire.

You’ll see the first “media query” for min-width: 768px - whatever is inside the curly brackets targets tablet and desktop screens while the second (max-width:767px) targets mobile devices.

Here's the code if using our CSS section:

@media screen and (min-width:768px) {
.shopify-section.qq-typewriter {
padding-top:300px!important;
padding-bottom:300px!important;
}
}

@media screen and (max-width:767px) {
.shopify-section.qq-typewriter {
padding-top:100px!important;
padding-bottom:100px!important;
}
}

 

If using the built-in CSS field:

{@media screen and (min-width: 768px) {
padding-top: 300px !important;
padding-bottom: 300px !important;
}}

 

Hope this helps!

Shop The Article

35% OFF!
Lite version available!

Typewriter Effect

From $45

/

SHOP NOW