-
Posts
-
Hi, with the Post Slider widget, how can I force it to show only one row on the mobile view?
Thank you.
Hi toddvee!
Thank you for using Enfold.
Please add this in the Quick CSS field:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even { margin: 0; clear: none; width: 32%; margin-left: 1%; } .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.first { margin-left: 0; width: 33%; } }Regards,
IsmaelThanks Ismael. Appreciate your thoughts. I had a similar idea to what you prescribed and tried it but it wasn’t exactly what I was looking for. I should explain better.
Currently with Enfold’s Post Slider if you have more than 1 column set, say 3 or 5 columns, when the screen narrows below 767px width, the Post Slider automatically creates additional rows. I would like to ensure that there is always one row and no additional rows are ever created when the screen narrows. I’ve included links privately to show you what I mean.
Another thing I would like to do with Post Slider content elements (as well as masonry blog content elements) is to allow them to display post data the same way Blog Post content element output post data even when there is a plugin code automatically set to appear above or below a post.
For instance, I have a plugin that automatically adds rating stars after each post. When I insert a Blog Post content element onto a page, the star rating system displays perfect below the blog image and content. However, for Post Slider and Masonry content elements, the star rating system is not appearing. What would I need to do, to ensure that this star rating system also appears for Post Slide and Masonry content elements?
Thank you much.
Hi,
Thanks for the screenshots, could you provide us with a link to the site in question so that we can take a closer look as well please?
Thanks,
RikardHey!
1. Use this code in Quick CSS field:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .slide-entry { width: 100%; }}2. This is about a 3rd party plugin and as written in our support policy we can’t provide support for every plugin existing. You would need to ask plugin’s author or hiring a freelance developer for this job, as it would require a huge amount of time and customization of the theme.
Regards,
AndyHi Andy, thank you for your responses.
1. I attempted what your described but making the width 100% only ensures that each post in the post slider is 100% wide below 767px. The slider still creates 5 additional rows. As mentioned I am looking to ensure that below 767px, the Post Slider only has one row, and all the posts showing up only in that one row. Desire is for no additional rows to be created. Please advise.
2. I would think that this simply has to do with placing the plugin code in exactly the right place with the PostSlider.php and Masonry.php files. But nonetheless I will contact the plugin provider for assistance.
Thanks again, look forward to your help.
In this enfold link it talks about adding the code for WP Post Ratings,
[[ PHP if(function_exists(‘the_ratings’)) { the_ratings(); } PHP]]
into the loop-index.php.https://kriesi.at/support/topic/wp-post-ratings-php-code-adding-problem/
Hi!
Hm? not sure what you mean. If you want only one column in post slider why not choose only one column when editing post slider element? simply look for “Columns. How many columns should be displayed?”.
Best regards,
AndyHi Andy, thank you for the response. I have worked with the column variable before and it works great but it doesn’t allow me to show different numbers of columns based on different browser window sizes, e.g. Desktop vs. mobile.
What I am looking for is this solution:
a. When a user is viewing the website’s post slider from a desktop computer (or browser over 767px), I would like them to see Five Columns&One row.b. When a user is viewing the website’s post slider from a mobile device (under 767px), I would like them to see only One Column&One Row, not One Column and multiple rows as is the default with configuration of the slider.
The main issue is that when looking at post slider from mobile, additional rows are created. I only want one row to appear always, no matter what the browser width is desktop or mobile.
Hopefully this makes more sense. Let me know if you need more information.
Thank you.
Hey!
I see only one column on mobile at the link you have provided:
Can you show us what you mean and what you want to achieve please? use imgur.com or dropbox to make thing clear for u (screenshots/mockups).
Cheers!
AndyHi!
in this case I recommend to you to use two post sliders with one which will be shown on mobile desktop only. For this you need to turn on custom class for all ALB elements: kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then define a unique CSS class (e.g. “mobile_only”) for the post slider element which should be shown on mobile only. Then you can use a code in Quick CSS field like this:
@media only screen and (min-width: 736px) { .mobile_only { display: none; }}Let us know when you are done and still need help with this.
Cheers!
AndyHi Andy, thanks for the great response. I turned on custom classes for all ALB elements as you suggested. I created two post sliders, a 1-column post slider for screens narrower than 736px, and a 5-column post slider for screens wider than 736px.
The only issue now seems to be some type of rendering/javascript issue when one post slider disappears and the other appears… For instance, when I load the page on a browser screen wider than 736px first, the 5-column post slider appears as expected and when shrinking the screen below 736px the 5-column post slider disappears also as expected responsively. However the 1-column post slider that is supposed to appear in its place doesn’t appear properly. The 1-column post slider div and all its code appear, but the actual post/images of the slider don’t display. Any ideas on what can be causing the issue?
Note: this only happens when opening the browser and making it responsive. The fix you recommended works perfectly on any fresh page load or a users first time visit to the page.
Thank you and let me know if you need further explanation of the issue.
Sincerely,
MeHey!
can you provide us a precise link showing this issue please? Don’t forget to clear browser cache and hard refresh a few times.
Regards,
AndyHi!
well, we can’t change our theme for every 3rd party plugin. If the author can’t help you, then you need to hire a freelance developer for the job to make it compatible.
Regards,
AndyHi Andy, thank you. Two things…
1. I understand that it would be very difficult to change for every third party plugin and I wouldn’t expect Kriesi to. I’m just trying to understand completely – please bare with me. I thought it would be easy to ensure that the Masonry Grid shortcode outputs the same meta and content as the Blog shortcode. So are there any plugins that you can recommend, like social plugins, that would work with the Masonry Grid shortcode. For instance, if I want custom social sharing buttons to appear just underneath each Masonry Grid entry, is there any plugin that will display properly?
2. Did you see my reply about a different the original topic here?:
https://kriesi.at/support/topic/post-slider-getting-posts-in-one-row-on-mobile-view/?bbp_reply_to=556313&_wpnonce=17ab924d37#new-postHi!
1. We just have a list of recommended plugins for Enfold here and maybe you will find what you need:
https://kriesi.at/support/topic/recommended-plugins-last-update-04-09-2013/
Otherwise you need to search and try by yourself for different plugins.2.) I don’t understand your question. What do you mean? and link you have provided is not working for me. Please stick to one topic only in one thread.
Regards,
Andy
- You must be logged in to reply to this topic.