[Resolved] Dynamic Mobile Scalling With Tagline Change

Home Forums Support [Resolved] Dynamic Mobile Scalling With Tagline Change

Home Forums Support Dynamic Mobile Scalling With Tagline Change

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1615003
    Marcin

    Hi folks.

    Firstly, GeneratePress is just fantastic.
    I’ve achieved what I had in my mind instantly.
    I’m stuck on final touches.

    [Detect mobile and replace tagline to shorter one]
    I have a tagline that uses typewriter effects.
    Works good on dekstop, but it is too long for mobile user.
    – How would I detect mobile and replace tagline, depeneds on view screen size?

    [Logo works on desktop, but doesn’t scale with mobile]
    I’ve used your CSS script to position tagline under logo, but it breaks mobile.
    – Possible in CSS to fix it?

    [My CSS]
    /* SOme green shadows around boxes, to be touched */
    .main-navigation {
    -webkit-box-shadow: 10px 10px 5px 20px rgba(20,20,20,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 10px 25px 20px rgba(0,30,20,20.75);
    }
    .footer-widgets {
    -webkit-box-shadow: 10px 10px 5px 20px rgba(20,20,20,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 25px 20px rgba(20,40,20,20.75);
    }

    .separate-containers .inside-right-sidebar {
    text-align: center;
    }
    .sidebar .widget .widget-title {
    text-decoration: overline;
    }
    .sidebar .widget {
    background-color:rgba(0, 0, 0, 0.9);
    }
    .footer-widgets .widget-title {
    background-color:rgba(0, 0, 0, 0.1);
    }

    /* To be reused somewhere else, flashing touch */
    .site-main .post-navigation {
    animation: color-change 1s infinite;
    }
    @keyframes color-change {
    0% { color: white; }
    50% { color: green; }
    100% { color: black; }
    }

    /* Stack logo and Tag line from GP forums*/
    .site-branding-container {
    flex-direction: column;
    align-items: flex-start;
    }

    /* Typing the tagline */
    .site-description {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation:
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
    }

    /* The typing effect */
    @keyframes typing {
    from { width: 0 }
    to { width: 100% }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }
    }

    [Site]
    nodetwelve.com

    #1615265
    Elvin
    Staff
    Customer Support

    Hi,

    [Detect mobile and replace tagline to shorter one]
    I have a tagline that uses typewriter effects.
    Works good on dekstop, but it is too long for mobile user.
    – How would I detect mobile and replace tagline, depeneds on view screen size?

    While we have a filter for the site description (generate_site_description_output), It can’t be used for screen resize detection because it’s server sided.

    That said, you’ll have to resort to jQuery or vanilla JavaScript to replace the innerHTML string of .site-description for mobile viewports.

    Unfortunately, this kind of site customization is out of our scope.

    [Logo works on desktop, but doesn’t scale with mobile]
    I’ve used your CSS script to position tagline under logo, but it breaks mobile.
    – Possible in CSS to fix it?

    That’s due to the white-space: nowrap; property of your .site-description class.

    Try adding this to address the issue on mobile viewports:

    @media(max-width:768px){
    .site-branding-container .site-logo {
        width: 100%;
        margin-right: 0;
        text-align: center;
    }
    .site-header .header-image {
        width: 100%;
        height: auto;
    }
    
    .site-branding-container {
        max-width: 100%;
        overflow: hidden;
    }
    
    p.site-description {
        text-align: center;
        white-space: normal;
        margin-top: 12px;
    }
    }

    This changes the white-space: nowrap; to white-space: normal; and sets text-align: center; for the site description so it atleast looks visually balance. I’ve also added a bit of margin-top so the logo and the tagline doesn’t look vertically jammed together.

    This same CSS also turns the logo sizing to responsively scale depending on the mobile viewport width’s size.

    Here’s how it would look like: https://share.getcloudapp.com/04uNZzgB

    A wise man once said:
    "Have you cleared your cache?"

    #1615292
    Marcin

    Hi Elvin.

    Thank you for your suggestions. My issues are solved with your code and ideas.

    Thanks!

    #1616456
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1617654
    Marcin

    I’ve been reading quite a lot about GeneratePress, common issues, how to’s, how to sort out custom things I’d require. I bought the theme and withing short amount of time, including one question I’ve asked here (to be honest by being too tired to fix it myself), I’ve got 2 sites up and running.

    Thanks for all the help, in return I’ve plugged an add for GP in this tutorial:
    https://nodetwelve.com/featured-image-with-category-overlay-in-wordpress/

    Thanks again.

    [Ps]
    – CodeBlocks PRO, seems like it should be out soon, but it’s not, or I can’t find it?
    – WP Show Posts PRO. Do I need WP Show Posts along the PRO version? GP screams that it needs it even if I have the PRO version?

    #1617914
    Elvin
    Staff
    Customer Support

    Hi,

    I believe this has been asked quite a few times already on the forums.

    You can start a new topic about this?

    You can check these topics for the previously suggested solutions to achieve this:

    https://generatepress.com/forums/topic/post-image-overlay-category/
    https://generatepress.com/forums/topic/category-on-post-featured-image/#post-1482296
    https://generatepress.com/forums/topic/coloured-category-and-post-term-buttons-badges/page/2/

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.