@victoria – I have a child theme and I’ve added the code into style.css but what do I do with this previous CSS?

@media only screen and (max-width: 1150px) {
#top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none!important; }
.av-burger-menu-main { display: block!important; }} 

I’ve added the 2 lines into your CSS but between 1150px and 990px I now have:
– burger menu top right where it should be but still no search icon
– the space for the normal menu is empty but still visible

and then between 990px and 768px the search icon reappears, the empty ‘normal’ space has gone but the top of the main page content & heading (“Welcome to the…”) is cut off… (and I had to add some CSS to fix .av-logo-container height, which if you remove it the heading reappears but the news ticker now runs over the top of the heading because .av-logo-container has not got enough height – try it in DevTools to see what happens)

but below 768px everything is OK (but again I’ve had to add some CSS to fix #header_main height).

PS. Trying to fix this would be an awful lot easier if the logo/header/menu classes were consistent but they seem to change between different screen widths… :-(

Website is http://dev.henleyherald.com/

Custom CSS code added to try to get the mobile menu working at 1150 px is

@media only screen and (max-width: 1150px) {
#top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none!important; }
.av-burger-menu-main { display: block!important; }
}

Use Chrome DevTools to see the problems:
1. Search icon required when mobile menu displayed but adding #menu-item-search (display: block!important;} in the above media query has no effect.
2. How to move the burger icon out of the ‘normal’ menu area between 1150px and 990px (and into its header position below 990px between these widths), and also to remove the ‘normal’ menu blank space (I think this might be .av-main-nav).

[Or more simply, in Enfold > Main Menu, for Menu Items for Mobile, where it has options for Activate on browser widths below 768px or 990px, I want the mobile menu to activate “below 1150px”.]

NB. This is not the only site where I need this fix. I have other sites where the client has requested a switch to the mobile menu at a higher width than Enfold’s 990px default (which is too low IMHO), usually being a fix for iPads and/or, as here, a lot of main menu top level elements.

It is not a plugin conflict, it is a problem in LayerSlider and/or Enfold.

I have deactivated all plugins and removed the additional CSS to test this out.

When the slider type is set to Responsive in LayerSlider Slider Settings with a canvas width and height of 700 px and 467 px respectively, all the slider images (which are all actually 700 px wide and 467 px high) are expanded to fill the layerslider_X div, which has values set of width: 863px; height: 576px;.

This is the Responsive HTML code from the page for a canvas width and height of 700 px and 467 px:
<div id="layerslider_7" class="ls-wp-container fitvidsignore ls-fullwidth ls-container ls-responsive ls-device-is-desktop" style="width: 863px; height: 576px; margin: 0px auto; position: relative; visibility: visible;" data-layerslider-uid="LSwkerzzlm5">

The classes .ls-wrapper.ls-bg-outer and .ls-bg are also incorrectly set at 863px and 576px.

If the slider type in LayerSlider Slider Settings is then changed to Fixed Size the layerslider_X div values are altered to a width of 700px and height 467px, and the slider images are correctly displayed as required/specified in the canvas Settings.

This is the Fixed Size HTML code, again for a canvas width and height of 700 px and 467 px:
<div id="layerslider_7" class="ls-wp-container fitvidsignore ls-fullwidth ls-container ls-fixedsize ls-device-is-desktop" style="width: 700px; height: 467px; margin: 0px auto; position: relative; max-width: none; visibility: visible;" data-layerslider-uid="LS851ya40rt">

The classes .ls-wrapper.ls-bg-outer and .ls-bg are also now correctly set at 700px and 467px.

Setting the slider to Fixed Size is of course useless because the slider does not display properly on a phone or tablet.

Whilst we have found a CSS workaround to allow Responsive mode to display as it should, so I don’t need any further help, I think this issue needs reporting to your development team to have them investigate and discover whether it is LayerSlider and/or Enfold that is causing the problem, and hopefully effect a proper fix without having to resort to CSS overrides.

What I didn’t understand in the post I quoted was that there is a #streetview CSS declaration that is not referenced in the iframe code.

So I think something is missing in order to get this working – can you post what the complete solution should be? I don’t follow your ‘body’ sugestion above either I’m afraid.

Regarding Google blocking the Street View URL, why would they do that? I’m trying to promote their service… (not that they need much more promotion). Real estate websites (in the UK where I am) are almost all using Street View in a listing of a house for sale – see the Street View tab on this page.

This post has a Featured Image of the ‘normal’ size, 700px x 467px. It has this code

.big-preview img {
	width: auto;
}

in a child theme style.css to override the width: 100% in layout.css, for the FI to display at its ‘proper’ defined size. If you use Developer Tools to temporarily turn off this child declaration you will see the FI fill the whole of the outer entry-content-wrapper container (not what is required).

This other post has a FI of 467px x 467px. It is displaying at that ‘proper’ size – which is what I want – because of the child CSS override above. Again, turn this off temporarily and the 467px wide image fills the whole container.

So you can see that I have managed to override width:100% in layout.css.

Sometimes however an FI will be another smaller size so I need a solution that works for all FI image sizes i.e. stop the enlargement to fill the outer container, and my question is whether I have done it in the right way with width:auto or is another CSS statement a better / correct way e.g. inherit?

max-width has worked but the layout.css code definitely changed between 3.8.5 and 4.0.3 to add width:100% as I’d saved the old version and compared it. Thanks.

OK, just found the problem.

Somehow Page Sidebar navigation was ticked in Enfold > Sidebar Settings which was causing widget_nav_menu to appear automatically above the widget area, I didn’t actually have any other widgets in the Widgets > Sidebar Pages widget other than Text. So I’ve now un-ticked it and added a Custom Menu under the Text (‘Our Members’) and it’s how I want it.

Thanks, case closed. :-)

So what is the point of the selection box Slideshow Image Size?

You’re saying – and this is the behaviour of the slider – that whatever image size I choose is expanded to fill out the outermost container space. Which is crazy.

The statement under the selector title says “Choose the size of the image that loads into the slideshow” which, of course, is what is happening but the slider behaviour should be “Choose the size of the image that is displayed by the slideshow”?

That is what the image size selector should do – surely?

Hi Yigit,

I tried to add HTML tags in Text previously but found the editor stripped them out. When I viewed the Text tab of the Short Description that you had edited, this is what I saw on screen: http://imgur.com/a/Wz3F9 – there were no HTML tags.

And as soon as I did an Update on the product, your edits were lost. How did you get the <p> and <br> tags to stay?

The function to get the Short Description to display on the category thumbnail viz.

add_action( 'woocommerce_after_shop_loop_item_title', 'avia_shop_overview_extra_header_div_new', 20);
function avia_shop_overview_extra_header_div_new() {
	global $post;
	$text = '<div>' .$post->post_excerpt. '</div>';
	echo $text;
}

was actually provided by Yigit, one of your Enfold Support colleagues, in response to a previous question – https://kriesi.at/support/topic/woocommerce-grid-remove-price-and-add-product-short-description-instead/#post-680083

I have modified that function by using snippets from other Enfold questions/replies to get it to show the Short Description instead of the_excerpt, so I rather hoping that someone could suggest a further tweak to fix how the Short Description is currently being displayed…?

Hi,

The product I’ve added the Short Description to is Anniversary Waltz, URL http://dev.jacksgallery.co.uk/product/anniversary-waltz/

On the limited-edition-prints product category page you may need to adjust the ‘Sort by’ selector for ‘Name’, then that product should appear in the middle of the second row on the first page.

Sorry been away… here’s the post link again.

1. I’ve got this working using @Josue’s code from the second link above however the categories are not showing – here’s the code I’m using, I’ve removed the comment count section.

function custom_shortcode_func() {
	ob_start();
	echo "<span class='post-meta-infos'>";
	echo "<time class='date-container minor-meta updated'>".get_the_time(get_option('date_format'))."</time>";
	echo "<span class='text-sep text-sep-date'>/</span>";

	    if(!empty($cats))
	    {
	        echo '<span class="blog-categories minor-meta">'.__('in','avia_framework')." ";
	        echo $cats;
	        echo '</span><span class="text-sep text-sep-cat">/</span>';
	    }

	    echo '<span class="blog-author minor-meta">'.__('by','avia_framework')." ";
	    echo '<span class="entry-author-link" '.avia_markup_helper(array('context' => 'author_name','echo'=>false)).'>';
	    echo '<span class="vcard author"><span class="fn">';
	    the_author_posts_link();
	    echo '</span></span>';
	    echo '</span>';
	    echo '</span>';
	echo '</span>';
	$output = ob_get_clean();
    return $output;
}
add_shortcode('the_post_meta', 'custom_shortcode_func');

I tried ‘echo $cats’ on its own but nothing shows, implying $cats is empty. Is the problem how does $cats get populated – shouldn’t there be a wp_get_post_categories function call or something?

2. If you look at any other post you’ll see the comments are last but on this ALB-created post they are before the share link and Related Posts. I suspect there might not be anything that can be done about this because the Comments are added as a content element in the post.

3. Related Posts are now appearing somehow, I didn’t do anything, must have been a blip on my part! So sorted.

@Andy – did you not read this in my last post?
“… this is a live news website that has new posts added on a daily basis. The posts referenced on pages 7 and 69 (of News) may soon be on later News sub-pages”

“Beautiful Winter Destinations” is now on page 9 of News – http://www.henleyherald.com/news/page/9/
“Have Your Say – EU Referendum” is now on page 71 of News – http://www.henleyherald.com/news/page/71/

Depending on when you look at this problem again, those posts might be on page 10 or page 72…. or perhaps later – it depends on how many News stories are added each day, because it pushes back the two posts onto later sub-pages.

@Andy – “I still think that screenshots would help to make things clear for us.” I provided you with a screenshot in my last post here – http://imgur.com/a/rNBGA

The problem is this – both those posts do not have the category of News assigned to them yet they appear on the News (sub-)pages.

• This reply was modified 8 years, 2 months ago by zimbo.

I assume I use a Text Box to set the title as H1?

But how do I get the post meta data to show under the title?

I do not use Enfold’s Sharing links but Jetpack’s Sharing app and this is normally displayed right after the post content and before the comments, however on the ‘ALB-created post’ the sharing links are shown after the comments section – how do I get the Jetpack share links to follow the order of all other posts on the site i.e. before the comments?

I also Jetpack’s Related Posts feature on all posts – see an example here if you’re not familiar with it, but this is not showing at all on the ‘ALB-created post’ – how do I get it to show, as on all other posts?