Easily install pre-built Shopify section templates without hiring a developer!
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!
