Home>Support>Mobile vantage word splitting

Mobile vantage word splitting

On mobile the Vantage theme splits word exactly where it wants. For example a sentence like this.

Welcome to our beautiful site.

Could be looking like this:

Welcome to our bea
utiful site.

Is it possible to choose where the word should split on the mobile theme?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 4 months ago Daniel Hi, I Work Here

    Hi Tor

    We could adjust this using some custom CSS

    Do you have a public URL where we can take a look at this? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

    Looking forward to hearing from you

  2. 7 years, 4 months ago Private Message - Tor André Sandum

    This is a private message.

  3. 7 years, 4 months ago Daniel Hi, I Work Here

    Hi Tor André Sandum

    You can change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    @media screen and (max-width: 480px) { 
    
    .widget_headline-widget h1 {
      font-size: 20px !important;
    
    }
    }
    

    Let me know if that works out for you

    Cheers

  4. 7 years, 4 months ago Private Message - Tor André Sandum

    This is a private message.

  5. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Hi Tor

    We can try upping the single column collapse point for that layout by inserting the following under Appearance > Custom CSS:

    /* Grid Loop */
    @media (max-width: 680px)
    body.responsive .vantage-grid-loop article, body.responsive .vantage-circleicon-loop .widget_circleicon-widget {
      float: none;
      width: 100%;
    }
    

    The 680 value can be increased to push the grid layout into a single column at higher resolutions, if required.

  6. 7 years, 4 months ago Tor André Sandum

    I can’t get that code to work even at 1000 px :(

  7. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Is that Custom CSS still in place? If you put it back I’ll take a look at what’s going on there. Thanks.

  8. 7 years, 4 months ago Tor André Sandum

    Sorry, the original code you posted is back in now! :)

  9. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Hi. The Custom CSS I sent is working. If you adjust 20px value down to 10px to test, you will see the difference below 680px resolution.

    Try the following to help the word-wrap situation:

    .widget_headline-widget h1 {
        word-wrap: normal;
    }
    
  10. 7 years, 4 months ago Tor André Sandum

    Are we talking about this?

    /* Grid Loop */
    @media (max-width: 680px)
    body.responsive .vantage-grid-loop article, body.responsive .vantage-circleicon-loop .widget_circleicon-widget {
      float: none;
      width: 100%;
    }

    I don’t see any 20 px value in that code?

    And what do you mean when you say “the word-wrap situation”?

    Sorry for my ignorance :)

  11. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Hi Tor André Sandum

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  12. 7 years, 4 months ago Tor André Sandum

    Done, thank you very much for all this support guys!

  13. 7 years, 4 months ago Private Message - Daniel Hi, I Work Here

    This is a private message.

  14. 7 years, 4 months ago Private Message - Tor André Sandum

    This is a private message.

  15. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    Thanks Tor

    Advice

    Please checkout your child theme style.css. You’re trying to import:

    @import url("../vantage/styles/blue.css");

    blue.css would have unfortunately been overwritten if it was being stored in the parent theme folder. During theme updates the parent theme folder gets overwritten.

    Consider removing header.php from your child theme. Instead you could insert the Facebook script via functions.php:

    /**
     * Facebook script.
     */
    function vantage_child_facebook_script() { ?>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <?php }
    add_action( 'wp_head', 'vantage_child_facebook_script' );
    

    Search

    The search issue resolves if you change back to Vantage parent theme.

    searchform.php has been updated. If you definitely need that in your child theme perhaps try merge the new file with your current file. That might resolve the problem.

    Original Challenge

    Sorry! I’ve lost track of what were working on. Please can you let me know what you still need help on. Sorry for the hassle.

  16. 7 years, 3 months ago Tor André Sandum

    Thank you so much! I would not have known what to do without your help. Things seem to be back on track now, and much tidier!

    I only need searchform.php in the child to change the placeholder. Is there any way to do that using a function/filter?

    The original challenge was to make it so that the grid loop on a mobile phone shows a 2×2 setup rather than a 2×2 – 1×1 – 2×2 setup :) It looks kind of wierd.

  17. 7 years, 3 months ago Andrew Misplon Hi, I Work Here

    Super, glad to hear we’re making progress.

    Searchform

    No problem, let’s keep that in your child theme but update it. Replace the contents of your child searchform.php with the following and then update the placeholder again:

    <?php
    /**
     * The template for displaying search forms in vantage
     *
     * @package vantage
     * @since vantage 1.0
     * @license GPL 2.0
     */
    ?>
    
    <form method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
    	<input type="text" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" placeholder="<?php esc_attr_e( 'Search', 'vantage' ); ?>"/>
    </form>
    

    Grid

    Please make a backup of your Custom CSS and try replacing it as follows:

    .widget_headline-widget h3 {
        color: #2f3033!important;
        font-weight: 700
    }
    
    #secondary .widget .widget-title,#footer-widgets .widget .widget-title-2 {
        color: #e59100;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 15px
    }
    
    .widget_circleicon-widget .circle-icon-box a.more-button {
        font-size: 110%
    }
    
    /* Vantage set menu font family and weight */
    .main-navigation a {
        font-family: 'Open Sans',sans-serif;
        font-weight: 700;
        font-size: 110%
    }
    
    span {
        display: block;
        overflow: hidden
    }
    
    /* We consider 680px to be mobile resolution */
    @media (max-width: 680px) {
    span {
        overflow: visible
    }
    }
    
    /* Circle Icon Paragraph */
    .widget_circleicon-widget .circle-icon-box p.text {
        line-height: 2rem;
        font-size: 110%
    }
    
    /* Hide Search In Mobile Nav */
    .mobile-nav-frame form.search input[type=search] {
        display: none
    }
    
    /* Circle Icon Heading Color */
    .widget_circleicon-widget .circle-icon-box h4 {
        color: #2f3033!important
    }
    
    /* Circle Icon More Link */
    .widget_circleicon-widget .circle-icon-box a.more-button {
        color: #2f3033!important
    }
    
    /* Vantage Link Color */
    a:hover {
        color: #e59100
    }
    
    /* Vantage Grid Thumbnail Hover Background */
    .vantage-grid-loop article .grid-thumbnail:hover {
        border-color: #e59100;
        -webkit-box-shadow: 0 0 5px rgba(0,187,251,0.75);
        -moz-box-shadow: 0 0 5px rgba(229,145,0,0.75);
        box-shadow: 0 0 5px rgba(229,145,0,0.75)
    }
    
    /* Vantage Grid Loop Article Width */
    .vantage-grid-loop article {
        width: 33.33%
    }
    
    /* Vantage Hide Post Loop Grid Excerpt */
    .vantage-grid-loop article .excerpt p {
        display: none
    }
    
    /* Grid Loop */
    @media (max-width: 780px) {
    body.responsive .vantage-grid-loop article,body.responsive .vantage-circleicon-loop .widget_circleicon-widget {
      float: none !important;
      width: 100% !important;
    }
    }
    
    /* iPhone 5 Retina regardless of IOS version */
    @media (device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .widget_headline-widget h1 {
        font-size: 14px!important
    }
    
    .origin-widget.origin-widget-price-box-simple-clean h2 {
        font-size: 16px!important
    }
    }
    
    /* Article page adjustments */
    .author.vcard {
        display: inline
    }
    
    .entry-categories {
        display: none
    }
    
    .nav-previous {
        display: none
    }
    
    .form-allowed-tags {
        display: none
    }
    
    #commentform label {
        display: none
    }
    
    article.post .share-buttons,article.page .share-buttons {
        margin: 20px 0 0;
        padding: 0;
        background: none;
        border: none;
        list-style: none;
        zoom: 1
    }
    
    article.post,article.page {
        margin-bottom: 0;
        padding-bottom: 30px
    }
    
    #commentform .logged-in-as {
        margin-bottom: 0;
        text-align: left
    }
    
    /* Hide breadcrumbs */
    #yoast-breadcrumbs {
        display:none
    }
    

    I’ve cleaned that up.

    There is some clearing happening making it hard to split 50% for mobile. What about one column grid from 780px down? An option? Test out the CSS and see if it’s ok.

  18. 7 years, 3 months ago Andrew Misplon Hi, I Work Here

    If you don’t like the way the grid clears after 780px try this. Create a folder in your child theme called “loops”. Then copy /loops/loop-grid.php from the parent to the child theme. Leave the original in the parent theme. Once in the child theme remove this line:

    <?php if($i % 4 == 0) : ?><div class="clear"></div><?php endif; ?>

    We can try using CSS to clear instead. Let me know if you want to do this.

  19. 7 years, 3 months ago Tor André Sandum

    I love it, thanks!

    This is perfect and thanks for cleaning up my code. This must be the best support I’ve ever gotten for any digital product ever. Keep up the good work! :)

  20. 7 years, 3 months ago Daniel Hi, I Work Here

    Thank you for you kind words Tor :-)

    Always feel free to open a new thread whenever you require support

    Cheers

  21. 6 years, 1 month ago fungen9x

    I want to change mobile resolution responsive from 680px to 1080px (iphone 6s Plus). Please help me !

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More