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


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 --