Need Your Help

[Adam Jasinski]

The website is mykidsondrugs.com

What CSS code can I use to make the mobile menu display for width up to 1024px?

My second question is, please take a look at the website through this:

http://www.responsinator.com/?url=mykidsondrugs.com

The product listings do not look correct, the pricing should be on the bottom of the photo next to the add to cart button, like so:

http://www.responsinator.com/?url=http://mykidsondrugs.com&device=iphone-5&orientation=portrait

Instead, in the following views, the pricing is within the photo and not visible correctly, how can the responsive design pricing for the products be fixed to look like the other correct renderings?

Here are the incorrect renderings for your reference:

http://www.responsinator.com/?url=http://mykidsondrugs.com&device=android-nexus-4&orientation=landscape

http://www.responsinator.com/?url=http://mykidsondrugs.com&device=iphone-6-plus&orientation=landscape

http://www.responsinator.com/?url=http://mykidsondrugs.com&device=iphone-6&orientation=landscape

http://www.responsinator.com/?url=http://mykidsondrugs.com&device=iphone-5&orientation=landscape

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (min-width:480px) and (max-width:767px) {
#products-box .prodprice { position:relative !important; right:inherit !important; bottom:-11px !important;}
.prodbuy { float:right !important;}
#products-box .prodbuy a { bottom: 18px !important; position: relative !important; right: 0 !important;}
}

Regards,
Chris

[Adam Jasinski]

Hello, the code almost fixed the problem, but see photo attached, the incorrect renderings are overlapping the add to cart and price box buttons. Also, how can I make the mobile menu display for up to 1024px?

http://imgur.com/a/rHRgA

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (min-width:480px) and (max-width:767px) {
#products-box .prodbuy a { padding:10px 15px !important;}
}

Regards,
Chris

[Adam Jasinski]

There is no change with the CSS code.

You can see here: http://www.responsinator.com/?url=mykidsondrugs.com

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (min-width:480px) and (max-width:767px) {
#products-box .prodprice { width:110px !important;}
}

Regards,
Chris

[Adam Jasinski]

Thank you, it is fixed now. I have another question:

Is there a CSS code I can use to activate mobile menu up to 1024px width (iPad landscape view).

The menu breaks and doesn’t fit when in this view:

http://imgur.com/a/ZFNgu

[Adam Jasinski]

Or do you recommend any other fix, such as making the menu items smaller text/spacing in this iPad lanscape view, with a css code?

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (min-width:1024px) and (max-width:1160px) {
.header .header-inner .nav ul li a { padding:38px 15px;}
}

Regards,
Chris

[Adam Jasinski]

Thank you kindly.

One last question:

Is there a CSS code to hide the description text/tagline for the homepage banner/slider for iPad portrait view (width: 768px) and iPad landscape view (width: 1024px). See attached photos:

http://imgur.com/a/EOeR8

http://imgur.com/a/Y58OA

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (min-width:768px) and (max-width:1024px) {
.nivo-caption { display:none !important;}
}

Regards,
Chris

[Adam Jasinski]

I was hoping the code would remove just the description text, but it seems it has removed both the headline and the description text underneath the headline

[Sonl Sinha]

Hi,

Remove:

@media screen and (min-width:768px) and (max-width:1024px) {
.nivo-caption { display:none !important;}
}

Add:

@media screen and (min-width:768px) and (max-width:1024px) {
.nivo-caption p { display:none !important;}
}

Regards,
Chris

[Adam Jasinski]

Hi,

Is it possible to get rid of the buttons in this view, and just have the headline (see attached photo)

http://imgur.com/a/2GiIo

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (min-width:768px) and (max-width:1024px) {
.nivo-caption a.read-more { display:none !important;}
}

Regards,
Chris

[Author]

Posts