hikashop logo break the responsive design

  • Posts: 846
  • Thank you received: 92
10 years 4 months ago #164206

i study the menu of hikashop web site and learn a lot about responsive template from css code there is many months .
I see a problem and i don't succeed to resolve at this time ( challenge / exercices) .
the problem is that span6 is in 48.9362% and the 2 images ( hikashop text 345px + logo 80px =425) can't fit inside this span when the span6 is< 425px .I don't have time but does display none for .complete_logo selector for the MQ breakpoints min-width 871 / max-width 885 resolve the issue ?

The number of pixel that cause the issue seem to be 14px Viewport MQ or 5 px CSS

regard's .

Attachments:
Last edit: 10 years 4 months ago by lionel75.

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
10 years 4 months ago #164224

Hi,

I don't have this issue on my end. The logo is displayed or hidden but never at the wrong place.
Which browser are you using ?

Regarding your solution it seems to be correct in order to solve this issue.

Please Log in or Create an account to join the conversation.

  • Posts: 846
  • Thank you received: 92
10 years 4 months ago #164300

All browser show the issue !! it is tricky but take care go slow
it is because the duration when logo is at wrong location only occur for a short period of time ( or for less than 14 px ) .
so many people don't take care of this .
here pdf of a captures screens when moving the right side edge of browser to the left . Save the pdf to the filesystem OS and open it using adobe reader desktop ( not inside browser) . scroll the bar of adobe reader to bottom to switch/ change capture screen you ll have a kind of animation and see the logo location move when reduce width .

for firefox on desktop
simpliest way is to install and launch the bookmarklet find here http://tzi.fr/css/responsive/breaq-bookmarklet on the hikashop web site . and then choose the breakpoint 870 and see the logo issue

for chrome on desktop
breaq dont work ( click on 870 button don't show issus ) but install responsive inspector ll help find the issue easely . responive inspector don't let us define / go in a custom "breakpoint " value with a pixel precision but let us go with precision to the breakpoint value define in css file .
We install it because it show a pop up in the bottom right side of the browser with dynamic information like pixel unit relative to CSS and viewport ( unit is relative to something so 5 pixels mean nothing ......) . so go to the value of the chrome capture screen to see the issue.....

so breakpoint in css is not compute in the same way beetween chrome and firefox ? YES ( sorry but until now this the mess if you don't try to understand why )

regard's

Attachments:
Last edit: 10 years 4 months ago by lionel75.

Please Log in or Create an account to join the conversation.

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
10 years 4 months ago #164304

Hi,

Thanks for the report.
Sorry, Mohamed didn't understand what you was talking about.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 1
  • Thank you received: 0
10 years 4 months ago #164622

Hello,

Thank you for your report.
We modified our CSS for a better responsive layout.

Regards,
Charlotte.

Please Log in or Create an account to join the conversation.

Time to create page: 0.092 seconds
Powered by Kunena Forum