Mobile website not responding

[crystallisspecimens]

Hello Kyle,

I have a problem with the website showing on a mobile device (iPhone).
Recently we removed the black box (Add to shopping bag button) from the products. This works fine for the website in a normal computer but in a mobile device I still see the black bar on the product photo.

Do you know how is possible to remove it also from iPhone device?

Thx

[Kyle – SUPPORT]

Hi

Please could you provide your link so I can check?

– Kyle

[crystallisspecimens]

Gallery

[Kyle – SUPPORT]

Add this to your custom css:

.shop-actions {
  display: none;
}

– Kyle

[crystallisspecimens]

Hi Kyle,

I have this code already. It works for the website on a computer but in iphone device, I still see the black box. Or in the computer when I give a zoom 200% for example the black box appear again.

THX

[Kyle – SUPPORT]

Just checked your custom css and you’ve put it inside a media query?

@media only screen and (min-width: 480px) { 
.search-results .blog-items.standard-items .blog-item figure {
width: 50%;
}
.shop-actions {
display: none;
}

With a min width of 480px, that’s why it shows on mobile. You need to take it out of the media query

– Kyle

[crystallisspecimens]

HEllo Kyle,
Yes I have this code on the custom css.
What do I need to do?
Remove the whole code?

Sorry I did not understand what needs to be done?

[Kyle – SUPPORT]

This:

@media only screen and (min-width: 480px) {

is an opening line of a media query, it is closed using a

}

anything within these 2 lines are only applied above or below the screen size that is stated, in your case anything above 480px.

I’m not sure why you have this code, someone has obviously provided it to you in the past. For now just add a closing tag after the search results css, so:

@media only screen and (min-width: 480px) { 
.search-results .blog-items.standard-items .blog-item figure {
width: 50%;
}
}

Hope I have explained well

– Kyle

[crystallisspecimens]

HEllo Kyle,

This is what I have done:
I took out this code:

@media only screen and (min-width: 480px) {
.search-results .blog-items.standard-items .blog-item figure {
width: 50%;
}

And I left only this code:

.shop-actions {
display: none;
}

The black box is out from the computer and mobile but on the mobile I can still see part of the second image. The second image that roll over.

HAve I done anything wrong? With the codes?

THX

[crystallisspecimens]

File is attched

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Please follow: http://support.swiftideas.net/knowledgebase/how-to-fix-second-image-from-showing-after-removing-shop-actions/

– Kyle

[crystallisspecimens]

Hello Kyle,

Before I follow those steps I noticed that there is a problem with the picture of a product in the mobile device. It becomes very small.

I have the following custom css:

@media only screen and (min-width: 480px) {
.search-results .blog-items.standard-items .blog-item figure {
width: 50%;
}
}
.shop-actions {
display: none;
}

The black box is gonne but in the single page product the image become much smaller and also the description too.
I noticed that the Leave Feedback is still on the mobile device. I used a customs css to remove this but on iphone stills showing.

THX

[Kyle – SUPPORT]

Please can you screenshot what you are referring to with the product picture and description? Views fine for me on mobile

For the leave feedback, likely that you’ve got that in a media query as well

– Kyle

[crystallisspecimens]

here it is

Attachments:

You must be logged in to view attached files.

[crystallisspecimens]

Kyle,

When I use this code:

@media only screen and (min-width: 480px) {
.search-results .blog-items.standard-items .blog-item figure {
width: 50%;
}
}
.shop-actions {
display: none;
}

The black box goes away on the mobile device but then in the product single page, the picture and information are not fine.

If I remove this (}) from the code and include the shop actions in the query, then the picture and information is fine but the black box comes back again.