Post by zzzzzz2 » Mon Jun 10, 2019 6:12 pm

hi all

google has not helped

Opencart 2x

i have a theme where the logo is set in the styles.css file unusually and does need seem to scale especially on mobile
the normal settings edit logo seems disabled by the theme authot

so i need to comment it out in the styles file and set it in the feader.tpl file

i would appreciate any code i need including positioning to add it and how to make it responsive

i cn edit fies upload them etc but i do not understand code so please be as precise as possible.. i will learn

thanks

george
Last edited by zzzzzz2 on Fri Jun 14, 2019 8:44 pm, edited 1 time in total.

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by straightlight » Mon Jun 10, 2019 6:48 pm

i would appreciate any code i need including positioning to add it and how to make it responsive
For an any code request, a URL is required. Forum rules.

The most generated errors being found on Opencart forum originates from contributed programming. The increased post counters are caused by redundancies of the same solutions that were already provided prior.


Regards,
Straightlight
Opencart.com Administrator / Quality Assurance Analyst / Programmer


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by zzzzzz2 » Mon Jun 10, 2019 7:51 pm

https://www.themeatshack.shop
Note currently the logo is poor on mobile and set in styles. Css

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by by mona » Wed Jun 12, 2019 7:22 pm

Nice site ..

The problem is not the header.tpl, its the css
The media section needs some attention ..
At a quick look and a quick fix

styles.css
header div#logo a
line 2743
remove -> background-size : 100%;
add -> zoom:0.9;

line 2744
remove -> background-size: 100%;

That should solve your problem

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by zzzzzz2 » Thu Jun 13, 2019 12:20 am

Hi
thanks for the suggestion however I'm avoiding making changes to production and have a mirrored site at http://www.themeatingjoint.shop/tmja/

the relevant css section I changed as you suggested is
header div#logo a {
display: block;
width: 167px;
height: 112px;
background-image:url(../image/the-meat-shack.png);
/* background-size: 167px 112px;*/
zoom: 0.9;
background-repeat: no-repeat;
margin:1px 0px 0px 5px;
}
full screen pc looks ok... resizing is poor
on mobile it chops off parts of the logo

additional info
in the theme header.tpl i have tried to make image be responsive
<div id="logo" class="top"><a href="<?php echo $home; ?>" title="Meat Shack" class="img-responsive" /><img src="<?php echo $logo; ?>" alt="" /></a></div>

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by by mona » Thu Jun 13, 2019 2:38 am

header div#logo a
line 2476
width : 100% -> remove
background-size: 100%; -> remove

line 2480
width: 100%; -> remove

line 2745
width : 100%; -> remove
background-size : 100%; -> remove


background-size and background-cover is the opposite you want - that is for fitting an image into a space and cropping it to fit the screen or container.

You need to remove css not add it. The zoom:0.9; should not be necessary either, but a quick fix, there is something overlapping, not as obvious as the background-size and width, but it is somewhere in

header div#logo.top
header div#logo a
header div#logo

- maybe padding or margin -
line 2712 - 2721 - 2744 - trying to force something

I kept:-
THIS IS MY LOGO
line 253
header div#logo a {
display:block;
width: 167px;
height: 112px;
background-image: url(../image/the-meat-shack.png);
}

FIT THE CONTAINER TO THE FULL WIDTH
line 2713 @media
header div#logo {
width: 100%;
}

CENTRE MY LOGO TO THE CONTAINER
line 2723 @media
header div#logo a {
margin: 0 auto;
}

To my knowledge I removed all the other instances of your css with regards to your logo fitting it into the maximum space available at all times and looks perfect on all screens. Changing the container and the placement is also responsive ;)

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by zzzzzz2 » Thu Jun 13, 2019 2:21 pm

Mona

Thank you very much...

you are a very very clever person.

much appreciated i learnt a lot

george

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by zzzzzz2 » Thu Jun 13, 2019 4:48 pm

Mona
the test site looks pretty good (apart from the overlap which is ok really)
http://www.themeating,shop/tmja/
however applying the same header.tpl and styles.css to production and that site the logo seems to zoomed out (in particular for mobile phones) and so is cropped by the container i think

Mona can you check and advise please

thanks

george

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by by mona » Thu Jun 13, 2019 6:51 pm

Hi
Ok taking a look at the test site - I am not sure you understood my suggestion - All css code relating to header div#logo (etc) needs removing keeping just the three lines of code above (placed exactly where they are now so commenting out is great).
It is position: absolute; that is causing your problem now

Just realised what the real site link is -
same issue and more code - same advice as above. Try to remove it all as suggested keeping only those css directives.

You do not add the @media - that was to explain that it MUST be placed exactly where it is ie. within the @media section it is already (when the browser detects screen change ) - I know it is all a little frightening ok - but copy the css file - rename it as a back up and bite the bullet.

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by zzzzzz2 » Thu Jun 13, 2019 11:43 pm

Mona

I will understand eventually...

just refer to my test site for now ... I need line references please

just the three lines of code above (placed exactly where they are now so commenting out is great).

Q: which three lines are these?

It is position: absolute; that is causing your problem now

Q: how do I fix?

You do not add the @media - that was to explain that it MUST be placed exactly where it is

Q: so I should remove text @media but leave the rest where I typed it?

Q: what indicates the start and end of the media section?

and thanks for taking time out to help...

george

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by by mona » Fri Jun 14, 2019 12:43 am

Q1. which three lines are these?
Answer:
ON LINE 253 you want (and nothing else)
header div#logo a {
display:block;
width: 167px;
height: 112px;
background-image: url(../image/the-meat-shack.png);
}

ON LINE 2713 you want (and nothing else)
header div#logo {
width: 100%;
}

ON LINE 2723 you want (and nothing else)
header div#logo a {
margin: 0 auto;
}

You do not want ANYTHING ELSE for any of the directives for logo ON ANY LINE -
header div#logo.top { no code inside this }
header div#logo a { no code inside this }
header div#logo { no code inside this }
EXCEPT THE THREE LINES ABOVE
239 - gone
245 gone
253 edited
2472 gone
2476 gone
2581 gone
2643 gone
2713 - leave but remove the @media above it
2717 - already gone
2727 - leave but remove the @media above it
2730 - I kept that line - it is a repetition of the above
2753 - gone

At worst case scenario, you might want to add padding: 2px somewhere - no big deal -

Q2. It is position: absolute; that is causing your problem now
Answer - REMOVE IT

Q3. so I should remove text @media but leave the rest where I typed it?
Answer
Line 2712 @media - remove
Line 2726 @media - remove

Q3.
Answer
Line 2702 @media blah blah blah {
some code
Line 2778 }

MEANS
@media - Hello media
blah blah blah - if you detect user is visiting using this
{ - please to the following
} - ok finished this section



Pleasure - I was very lucky to have a couple of people walk me through opencart at the beginning - and now I understand how lucky I was :)

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by zzzzzz2 » Fri Jun 14, 2019 3:54 am

Mona

I think I screwed up somewhere...

I think I followed your steps ... but something is wrong on the test site
http://www.themeatingjoint.shop/tmja/

thanks

george

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by by mona » Fri Jun 14, 2019 4:09 am

yes - your stylesheet is missing ...
check you actually uploaded it and to the correct place

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by by mona » Fri Jun 14, 2019 5:23 am

GREAT

right all you need to do is remove
1. /* position: absolute; */
2. /* top: 2px; */
3. /* left: 0px; */

from line 264
because
1. position:absolute is overlaying it and not relative to the rest
2. top 2px has no effect because it is to the top, maybe you want margin-top: 2px;
3. left: 0px; - if you are trying to push it to the left .. remove /* margin: 0 auto; */ from 2639 which is centering it

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by zzzzzz2 » Fri Jun 14, 2019 5:28 am

weird...
it is there.... but uploaded it and styles.css again...

much better... except for the niggling full screen laptop the categories menu is hidden...
mobile is fine and resized laptop pops up the menu... odd

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by by mona » Fri Jun 14, 2019 5:46 am

it happens sometimes .. now you know .. just upload again


re: niggling full screen laptop the categories menu is hidden

well that is in the @media line 2481
read it @media only screen and (min-width: 0px) and (max-width: 1200px) {

so your laptop is screen width 1200px or less - that is not an error - just a cut off point
- you can change that to be 1px less that you laptop !
Your menu is quite long, you can do whatever fits the menu - or push the menu onto two lines if that is what you want.

EDITED - I might have misunderstood - Do you not have the menu icon to dropdown on your laptop? - the solution is the same - but I am not sure I understand the problem.

I can not reproduce - browsers do not read css the same - However, your code states @media 1200 and over as well as @ media 1200 and under - so there is a conflict at 1200 point -
change
@media only screen and (min-width: 0px) and (max-width: 1200px) {
to
@media only screen and (min-width: 0px) and (max-width: 1199px) {

a better way to write it anyway

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by zzzzzz2 » Fri Jun 14, 2019 5:18 pm

yes I see what you mean...
for completeness I have changed it to 1199 to remove the otential conflict
firefox and edge both on laptop do not display the menu but chrome does...
i think chrome deals with css better
if i zoom firefox to 90% the menu appears...
its annoying..


anyway.... once again thanks for all your help!!!

george

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am

Post by by mona » Fri Jun 14, 2019 6:32 pm

you are welcome
I believe you should mark the title of this post as [SOLVED] as that is a different issue ..


I would take a look at the script site.js

// RESET THE MAIN MENU IF SCALING UP
if ($(window).width() >= 1200) {
$('nav#main_navigation > ul#main_links').show();
$('#js_mobile_sidebar').show();
}

// SOME STRANGE ISSUE IN IE8 WITH BODY OVERFLOW - SO HAD TO CAPTURE IT HERE
if (!$("html").hasClass("lt-ie9")) {
if ($(window).width() <= 1200) {
$('nav#main_navigation > ul#main_links').hide();
$('#js_mobile_sidebar').hide();
$('nav#main_navigation > ul#mobile_menu_trigger a strong').html('Main Menu');
$('#mobile_sidebar_trigger a strong').html('Show Categories');
}
}

Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by zzzzzz2 » Fri Jun 14, 2019 9:56 pm

interesting... on the basis that edge and ie have moved on and fixed stuff i commented out the section re ie8... and edge is now fine....

need to figure out firefox.... but pretty damn cool girl... pretty damn cool... you are GOOD

Active Member

Posts

Joined
Sun Aug 06, 2017 5:28 am
Who is online

Users browsing this forum: No registered users and 8 guests