Mobile vantage word splitting

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.

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

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

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.

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.

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.