Hi Victoria,

Thank you for your support!
Please see the screenshots:
https://prnt.sc/nb46wd
https://prnt.sc/nb47ss

Link: https://zoomit.gr/wordpress_2/store/

Best regards,
Nick

Hello Mike,

Thank you for your quick reply and your support.

My issue is: When I click to dropdown cart on mobile, it goes me directly to the cart page, as you see in the following screenshots.
https://prnt.sc/n9tlmq
https://prnt.sc/n9tl98

I would like, when I click to the cart icon, to display the dropdown list with the products in the cart and to stop there and not going to the cart page.
When I click to the cart icon again or click to the “go to cart” button, then it will go to the cart page.

I am looking forward to your news.

Best regards,
Nick

Hello Victoria,

Thank you for your quick reply. I really appreciate it!

I inserted that image from Shop Options tab –> Shop Image Banner
I am sending you the credentials in the private box.

I am looking forward to your news.

Best regards,
Nick

Hi Basilis

Thank you for your support.

I don’t know, why the image is displaying like this:
https://prnt.sc/n655gu

The resolution is 1900×1200

I am looking forward to your news.

Best regards,
Nick

Hi Ismael,

Thank you for your amazing support!!
I will write one more review for you because you are worth it!!!

Regarding to the product slider, it works as expected with the following snippet:

/* Snippet code about Product Slider Full Width */
/* Color section container width */
@media only screen and (max-width:480px) {
#section-container-width .container {
width: 100% !important;
min-width: 100%;
padding: 0;
margin: 0;
}}

/* 2 columns on mobile */
@media only screen and (max-width: 480px) {
.products .product {
margin: 0 1% 1% 0 !important;
width: 49% !important;
}

/* Full Width in Product Slider */
#section-container-width .container #main ul.products {
margin-left: 0%!important;
margin-right: 0%!important;
}}

Regarding to the product listings, it works as expected with the following snippet:

@media only screen and (max-width: 480px) {
.products .product {
margin: 0 1% 1% 0 !important;
width: 49% !important;
}
/* Full Width in Product Listings */
#main ul.products {
margin-left: -7.5%!important;
margin-right: -7.5%!important;
}}

Product Listings as expected:
https://prnt.sc/n0yfi4

Product Slider not as expected:
https://prnt.sc/n0yfcd

Product Listings not as expected:
https://prnt.sc/n0zweo

Product Slider as expected:
https://prnt.sc/n0zvwt

Link to Product Listings
https://zoomit.gr/wordpress_2/product-category/kalokairina/?product_tag=tsantes-thalassis

Link to Product Slider in Homepage
https://zoomit.gr/wordpress_2/

So, how can we combine both snippets?

Thank you in advance.

Best regards,
Nick

Hi Ismael,

It really worked! You are great!
Could you help me also with css code to have two columns product listings in full width in Shop archives, related products, search results..etc?

Thank you in advance,

Best regards,
Nick

Hey Nikko,

That’s what I need!!
Thank you so much!!
You can close this ticket!

Best regards,
Nick

Hi Nikko,

Thank you for your precious support!
It worked!
You can close this ticket.

Best regards,
Nick

Hi Basilis,
Finally, I use the following snippet:

@media only screen and (max-width: 480px) {
.products .product {
margin: 0 1% 1% 0 !important;
width: 49% !important;
}
#main ul.products {
margin-left: 0%;
margin-right: 0%;
}}

Now, I have 2 columns but i cannot adjust the container to be edge to edge.
I tried with margin-left and margin-right with no result and so I left it to 0%.
Could you help me please?
Look at the screenshot: https://prnt.sc/mx2f4c

Thank You in advance.

Best regards,
Nick

• This reply was modified 5 years, 9 months ago by nickgin.

Hi Ismael,

Thank you for your excellent support! I really appreciate it!

I am providing you the whole content of search.php:

<?php
if ( !defined(‘ABSPATH’) ){ die(); }

global $avia_config;

/*
* get_header is a basic wordpress function, used to retrieve the header.php file in your theme directory.
*/
get_header();

// allows to customize the layout
do_action( ‘ava_search_after_get_header’ );

$results = avia_which_archive();
echo avia_title(array(‘title’ => $results ));

do_action( ‘ava_after_main_title’ );
?>

<div class=’container_wrap container_wrap_first main_color <?php avia_layout_class( ‘main’ ); ?>’>

<div class=’container’>

<main class=’content template-search <?php avia_layout_class( ‘content’ ); ?> units’ <?php avia_markup_helper(array(‘context’ => ‘content’));?>>

<div class=’page-heading-container clearfix’>
<section class=”search_form_field”>
<?php
echo “<h4>”.__(‘New Search’,’avia_framework’).”</h4>”;
echo “<p>”.__(‘If you are not happy with the results below please do another search’,’avia_framework’).”</p>”;

get_search_form();
echo “<span class=’author-extra-border’></span>”;
?>
</section>
</div>

<?php
if(!empty($_GET[‘s’]) || have_posts())
{
echo “<h4 class=’extra-mini-title widgettitle’>{$results}</h4>”;

/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-search.php and that will be used instead.
*/
$more = 0;
global $posts;
$post_ids = array();
foreach($posts as $post) $post_ids[] = $post->ID;

if(!empty($post_ids))
{
$atts = array(
‘type’ => ‘grid’,
‘items’ => get_option(‘posts_per_page’),
‘columns’ => 4,
‘class’ => ‘avia-builder-el-no-sibling’,
‘paginate’ => ‘yes’,
‘use_main_query_pagination’ => ‘yes’,
‘custom_query’ => array( ‘post__in’=>$post_ids, ‘post_type’=>get_post_types() )
);

$blog = new avia_product_slider($atts);
$blog->query_entries();
echo “<div class=’entry-content-wrapper’>”.$blog->html().”</div>”;
}

}

?>

<!–end content–>
</main>

<?php

//get the sidebar
$avia_config[‘currently_viewing’] = ‘page’;

get_sidebar();

?>

</div><!–end container–>

</div><!– close default .container_wrap element –>

<?php get_footer(); ?>

I am looking forward to your news.

Best regards,
Nick

Hi Basilis,

Thank you for your quick reply.
I tried the following code, but it didn’t work.

@media only screen and (max-width: 480px) {
main.template-shop .products .product {
margin: 0 1% 1% 0 !important;
width: 49% !important;
}
main.template-shop #main ul.products {
margin-left: -7.5%;
margin-right: -7.5%;
}

I am looking forward to your help.

Best regards,
Nick

Hi Rikard,

That’s a very disappointing point of the theme because most of the people at nowdays use mobile phones for shoppping. I have set in my homepage 4-5 product sliders with 5 columns to promote my products and now my client has to scroll down 25 products in a row in order to reach the bottom of the page. That’s unfordable and exhausting. Nowdays, all modern themes have product sliders that you are able to swipe left or right

Best regards,
Nick

Hi Vinay,

Thank you for your response.

I really understand that. Is it easy for you to tell me which are the containers that are been involved to my issue, so I will try to tweak them thru css?

Best regards,
Nick