Jump to content

Reorder Code Blocks on Mobile

Recommended Posts

This is a tricky one:

I'm having trouble at mergebusiness.co (pw: thug) [business plan] with my header text -- I'm using a 'live' .typeit script and on mobile it runs the text back/forth onto the next line. I would love to add a mobile-only change to this code block to insert a <br> in the text to avoid that happening on mobile.

However, since that's not super likely, I created a duplicate .typeit code block tweaked for mobile beneath it, and have tried to hide the desktop code on mobile, and vice-versa. BUT the .typeit second code does not work because it only runs one .typeit script on a single page, it seems. Even when the first .typeit code block is hidden, the second .typeit code block won't run. 

My solution to this is to try and swap the order of these blocks when viewing on mobile, so the mobile version of the code block takes priority. Can I swap these blocks completely when viewed on mobile? (Neither is hidden right now.) 

OR-- if you can help me run two .typeit code blocks on the same page simultaneously that would solve it. I can just hide one on desktop and mobile.

Thanks to whoever can crack this one. Need to launch this website later this week, so help is appreciated.

USING: ".mobile-typeit-container" and ".desktop-typeit-container"

Edited by niccosays
Link to comment
  • Replies 4
  • Views 397
  • Created
  • Last Reply

Top Posters In This Topic

you could just do this with CSS. 

@media screen and (max-width:768px) {
    div.desktop-typeit-container mark {
        display: block;
        width: fit-content;
        margin: 0 auto;
    }
}
  • rule only kicks in up to 768px (this is iPad width, desktops and iPad pros etc will not be affected)
  • margin 0 auto centers it
  • will apply to all desktop typeit containers, so if need specific look up the block id

probably best to just put this rule inside <style> tags and add it to your existing code block. no need for two then

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

I'll add this as an alternative, just in case I understood the effect wrong and then you can mark whichever one as the correct answer. this CSS will just put a linebreak after the typewrite bit, as opposed to the answer above which puts the typewriter bit on its own line

@media screen and (max-width:768px) {
    div.desktop-typeit-container p1 {
        display: block;
    }
    div.desktop-typeit-container mark {
        display: inline-block;
    }
}

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

the word "and" is part of your text, so it depends how the plugin that you're using works when you type it in. I don't know anything about that.

it's hard / impossible to target specific words with CSS as we have to implement the first fix. if you can edit the text inside the plugin just add <br/> to force a line break there (but that would be across mobile and desktop). other than that, you could adjust the margins of the text a little to try to get the break where you want, but it's unlikely to be exact and consistent across devices. 

Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.