Need Your Help

Home Forums All Other Themes Need Your Help

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #79010
    Adam Jasinski
    Participant
    • Topics: 7
    • Replies: 28
    • Total: 35
    Member since: May 12, 2017

    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

    #79038
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    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

    #79046
    Adam Jasinski
    Participant
    • Topics: 7
    • Replies: 28
    • Total: 35
    Member since: May 12, 2017

    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?

    View post on imgur.com

    #79161
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    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

    #79189
    Adam Jasinski
    Participant
    • Topics: 7
    • Replies: 28
    • Total: 35
    Member since: May 12, 2017

    There is no change with the CSS code.

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

    #79193
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    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

    #79204
    Adam Jasinski
    Participant
    • Topics: 7
    • Replies: 28
    • Total: 35
    Member since: May 12, 2017

    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:

    View post on imgur.com

    #79205
    Adam Jasinski
    Participant
    • Topics: 7
    • Replies: 28
    • Total: 35
    Member since: May 12, 2017

    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?

    #79212
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    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

    #79217
    Adam Jasinski
    Participant
    • Topics: 7
    • Replies: 28
    • Total: 35
    Member since: May 12, 2017

    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:

    View post on imgur.com

    View post on imgur.com

    #79236
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    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

    #79274
    Adam Jasinski
    Participant
    • Topics: 7
    • Replies: 28
    • Total: 35
    Member since: May 12, 2017

    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

    #79319
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    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

    #79369
    Adam Jasinski
    Participant
    • Topics: 7
    • Replies: 28
    • Total: 35
    Member since: May 12, 2017

    Hi,

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

    View post on imgur.com

    #79414
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    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

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.