Easily install pre-built Shopify section templates without hiring a developer!
qwiqode qwiq 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 that what the section allows.
--- SHOW PROBLEMATIC SCREENSHOT --
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 essentially use the new built-in CSS block that Shopify now provides for each section, but for some reason, we can't add "media-queries" (these allow for identifying screen sizes) so you won't be able to have different values for mobile and desktop - which is usually essential.
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:
@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;}
}
Hope this helps!
-- INSERT YOUTUBE --
