Hey tdayley!

Can you share the actual page URL so I can check on why this is occurring for you?

Cheers

Thank you for the prompt reply. Your service is amazing. My site is www.trevordayleyblog.com - it seems to view okay on my Desktop under Chrome, but while on my MacBook Pro 15” Retina using Chrome it only goes three blocks across (not the full width.)

Hey again! I can’t seem to locate that exact portfolio element anywhere on the site – the one on your home page seems to also be holding 4 column layout on all desktop screen sizes. Is there a specific page URL I’m missing or is it the one on the home page?

It is the portfolio block directly above my footer. Here is a current screenshot. https://www.dropbox.com/s/65z07c1zsz9t0n4/Screen%20Shot%202014-07-29%20at%2010.30.43%20PM.png

Hi I am also having trouble with my buttons.

I would like to use the button with transparent background and have the text, button outline and arrow being white – then when you hover I would like everything to turn yellow. (#ffd747)

No matter what I try I cannot get it to work. Any help would be appreciated.

Thanks.

Hey ridehouse,

1. If you can share your URL i’d be glad to take a look and help

2. This would take custom css – if you can add a class to the column the button is sitting and provide me the URL to the page i’d be glad to write the css as well

Cheers

Hi, the url is http://stayanotherday.uk.com/

I added the class hoverbutton to the buttons (it’s the buttons at the bottom of the homepage.)

Thanks

Sorry – another question… Currently the shortcode ‘tabbed section’ takes the tab size from the length of the tab title. Is there a way to standardise the size so that they are all the same?

Thanks

Sorry, yet another question…. is it possible to speed up the milestone animation?

1. Change the button style back to just see through (without hover BG color) and add this into the custom css box located in your Salient Options panel:

body .full-width-section .hoverbutton .nectar-button:hover {
  color: #ffd747!important;
  border-color: #ffd747!important;
}

2.

.tabbed > ul li a {
    text-align: center;
    width: 160px!important;
}

speed: 1500,

Cheers

Thanks for all your help, that’s great.

On the buttons, is it possible to have the text colour change to yellow as well? At the moment it remains white.

Sorry…another issue….. When I use a google map in a tabbed section the map does not load correctly. Only the top left corner shows and the rest is grey. I can’t seem to find the issue.

Hey again,

1. Can you allow me to see the page again? Currently http://stayanotherday.uk.com/ is just showing a BG image

2. A Map element won’t work in a tabbed section by default due to the nature of how it works – one workaround you can try is to open the init.js file located in the js folder and change this:

$('body').on('click','.tabbed > ul li a',function(){
    var $id = $(this).parents('li').index()+1;

$('body').on('click','.tabbed > ul li a',function(){
     var $id = $(this).parents('li').index()+1;
         $(window).trigger('resize');

Cheers

Thanks, unfortunately that doesn’t seem to have worked.

I have unlocked the page again so that you can see the buttons, also the map can be found here.

Thanks for all your help.

Hey again!

Whoops – instead of placing the

  $(window).trigger('resize');

var $id = $(this).parents('li').index()+1;

try placing it right before this instead:

return false;

Unfortunately that didn’t work either. I will try to think of another way of laying it out.

Also is it possible to have the text colour of the buttons on the bottom of the home page change to yellow as well? At the moment it remains white. Thanks

Hey again!

window.dispatchEvent(new Event('resize'));

 $(window).trigger('resize');

body .full-width-section .hoverbutton .nectar-button:hover i {
  color: #ffd747!important;
}

Thanks. The maps working now. Thank you very much for all your help.

and now its not. Strange. haha. Oh well. Thanks.

ok, it works if you click the ‘map’ tab twice. weird.

Weird! Perhaps setting a slight delay in triggering it would work:

setTimeout(function(){ window.dispatchEvent(new Event('resize')); },300);

3) How soon to expect the ‘Related Posts’ feature?

Hey themanmathias!

It would most likely be easier to fix the recent posts grid to be 2×2 with css – if you can share your URL with that element on the page I’d be glad to write it up for you

Cheers

Thanks very much that’s good of you. The URL is http://storyanniversaryinvitations.co.uk and ‘from the blog’ is half way down. I’ve got it showing the four blog posts and you’ll see how it current looks.

Thanks again

Andy

Hey again! Add this into the custom css box in the Salient Options Panel:

.blog-recent .span_6 {
   width: 48%!important;
}

Thanks again – works a treat. I’ve tided it up with css and looks great. Couple more questions and I’ll leave you alone…

1) Now that I have a 2×2 grid of recent posts, can I still retain it as 1×4 column rather than 2×2 on mobile only?

2) I want to tweak the mobile style of my blog post title on the blog standard page, and also the blog title on single post pages. Can you tell me how to target these in the custom css box. I just want to change font size and line height.

3) Finally, and I think you’ve been asked this before – blog post dates on mobile on both blog standard and single pages get stripped out. Can I have them back in even if now shown stacked like the dates are on the blog standard page?

Much appreciated Andy

Hey again!

1. Change the above snippet to be:

@media only screen and (min-width: 1000px) {
   .blog-recent .span_6 {
      width: 48%!important;
  }
}

2.

@media only screen and (max-width: 1000px) {
   #page-header-bg h1, body h1, body .row .col.section-title h1 {
    font-size: 55px !important;
  }
  .container article.post .post-header h2 {
      font-size: 37px !important;
  }
}

3. It would be pretty easy to do this for the single post page, but the main blog page would require a good deal of css to make it work:

@media only screen and (max-width: 1000px) {
   .row .col.section-title span, html .single #single-below-header span {
       display: block!important;
   }
}

That’s great, thanks again for all your help.

you’re welcome

another quickie. The code you provided is working great, but I wondered if I could only show the text in the blog post before my <more> tag like it does on the blog index page. Currently it shows past my more tag (presumably a set number of characters).

I also have an issue at certain browser window sizes where the bottom row of recent blog posts are staggered, which I think is related to the amount of text it’s trying to show.

Thanks

Andy

Hey LaBargeMedia,

You’d need to modify this line in the init.js file:

var scrollNum = ($(this).parents('.carousel-wrap').attr('data-full-width') == 'true') ? 'auto' : '' ;

to be this:

var scrollNum = ($(this).parents('.carousel-wrap').attr('data-full-width') == 'true') ? 1 : 1;

Cheers

Hm, that didn’t seem to work. I changed out the line of code just like you said, but the carousel is still showing three items at a time, not just one, full-width item. Is there something else I should be doing?