This topic has 2 voices, contains 4 replies, and was last updated by  TB Support 3270 days ago.

Logo, banner and button issues in mobile and tablet

Tagged: ,

ThemeBurn Support › Forums › OpenCart Themes › Pavilion OpenCart Theme › Logo, banner and button issues in mobile and tablet

This topic has been marked as not resolved.

Hello,

I’m having the following issues with mobile/tablet view:

1) The site logo shows up extremely small in iPhone 6 and some tablets, but it’s fine in earlier iPhone versions. See the attachments. How can I ensure the logo shows up as in “earlier iPhone versions” for all mobile devices as well as tablets?

2) The banner fonts re-size to correctly fit inside the banner in iPhone 6, but do not do that in other iPhones. (See attachments) How do I get this to work in all mobile devices?

3) Finally, as you see I’ve uploaded my own icon for “shopping bag” instead of shopping cart. I want to change the other buttons for MENU and SEARCH ONLY IN MOBILE so that the buttons are charcoal on white instead of white on charcoal, but I had the following issues:
– When I tried to change these buttons, ALL the buttons on the site changed to charcoal on white (e.g., ADD TO BAG on the Product pages, and the buttons on account login, etc.) I want those other buttons to remain white text on charcoal button – only want to change the buttons at the top of the mobile view for search and menu. How do I do this?
– Also when I tried to change to charcoal text on white/clear button, I saw a gray shadow-type line below where the button would be. How do I get rid of this line?

Many thanks for your continued support with this great theme!
 meganbrosterman
April 24, 2015 at 12:26 am #40289

Regarding item (3), I tried to change the colors of the mobile header buttons by going to
Theme Settings -> Colors -> Theme Colors -> Header
and
- unlinked “button” and changed it to white (#ffffff)
- unlinked “button text” and changed it to charcoal (#666666)
- unlinked “button (hover)” and changed it to white (#ffffff)
- unlinked “button text (hover)” and changed it to charcoal (#666666)

THE BUTTON TEXT CHANGED TO CHARCOAL BUT THE BUTTON COLOR REMAINED CHARCOAL (SO THEY BECAME GRAY BOXES WITH NO TEXT).

There must be a bug where changing the button color for just the header doesn’t work? Please advise! Thanks!!
 meganbrosterman
April 24, 2015 at 4:06 am #40294

Hi,

1) iPhone 6 has a greater resolution than earlier models and that is why it goes to a different break point in the responsive design. You can modify theme default stylesheet a bit and increase the screen size check value. To do so, you need to:

- Open catalog/view/theme/pavilion/template/tb/main.css.tpl
- Find this code line:

@media only screen and (max-width: 359px) {

- And change it to:

@media only screen and (max-width: 380px) {

2) You need to use “Min Height” option for your banner images.

3) Use this custom code to get the right colors, until we investigate this problem:

@media only screen and (max-width: 767px) {
    #header_wrap .tb_toggle {
        color: #666 !important;
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
    #header_wrap .tb_toggle:before {
        font-size: 24px !important;
    }
}

Add these styles from the Pavilion CP > Theme Settings > Custom > Custom Stylesheet text field.

BR,
ThemeBurn team
 TB Support
April 28, 2015 at 6:20 pm #40400

Thanks so much!!! It all worked!!!
 meganbrosterman
May 11, 2015 at 8:18 pm #40731

Glad we’ve helped.

BR,
ThemeBurn team
 TB Support
May 12, 2015 at 10:21 am #40740
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.