Cart icon dissapears on mobile and footer not showing properly on product pages

Issue

I am helping my friend to create a WP webshop.

First question:On desktop, the Cart icon loads properly in the header, on mobile it is not there. The Theme itself seems to have no option to 'enable' this for mobile.

Site: meikuclothing.com

I tried various CSS tricks like adding the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then I tried different CSS rules, and they work on desktop when resizing the window, but straight on mobile the Cart icon is never there:

@media only screen and (max-width: 768px)
.has_header_fixed_right.stick.menu_bottom .header_inner_right, .header_bottom_right_widget_holder {
  display: block;
}

@media only screen and (max-width: 480px)
.has_header_fixed_right.stick.menu_bottom .header_inner_right, .header_bottom_right_widget_holder {
  display: block;
}

Second question: The footer looks good on the homepage/shop page. But when you open any product-specific page, the middle section of the footer is all wrong.

Any help will be greatly appreciated.

Solution

Here's the solution to your 1st problem:

@media only screen and (max-width: 420px) {
    .shopping_cart_outer {
       display:table !important;
    }
}

This will show the cart icon on Mobile devices.

The solution to your 2nd problem is this CSS:

.tnp-widget-minimal input.tnp-submit{
    position: inherit;
}

I hope this will help you out.

Answered By - Vinay Jain