OpenCart Community

In order for opencart to display properly must everyone who view it, have to have their screen res set to at least 1280 or bigger if not using standard text sizes ?

So what is wrong with my shop header bar not displaying text in 1024 when it does is 1280 there must be some coding wrong somewhere
www.3dlasercraft.com/store 2.3.0.2

Opencart clearly dos'nt display properly in less than 1280 on a Desktop, I went looking through themes in the market place and the screen shots of the theme all show the text along with the icons in the header bar, but when I select live demo the text dissappears and only the icons show, there is no reason for this there is plenty of room on the header bar for the text.
I had thought the issue was with my shop header but I see now it is the same on all using modifications of this default scheme, so there must be a coding error somewhere
I have confirmed that the text does display when I change res to 1280x960

Does anyone know how to fix this, thinking it might be an issue with the default theme, I bought a pre-made theme today on the market place and along with not display the header text it is also not displaying the borders down left and right of screen which ruins the design of the theme.
There must be a fix that allows opencart 2.3.0.2 to work properly at less than 1280

Found a few opencart shops online that are displaying the header text perfectly on my 1024 monitor, so there must be away to do it or they are on an older version

Use the element inspector in a browser like Firefox (right click on the affected area -> Inspect element) and untick the classes that are around the affected elements, you'll find what's causing the text to hide under certain resolutions.

If you look at Open Cart's demo in mobile (for example) the add to cart buttons on the main page are only icons (your shop has the same behavior). If you reused this class, the behavior would follow suit.

Thanks for reply most appreciated.
I have looked at it with element inspector but don't really know what I am looking for, I cant see any tick boxes
the stock default theme untouched is the same as is the add on theme I bought.
What code makes the text go away ? I could understand if there wasnt enough room in the header bar but there is loads of space, I would rather have the text than the icons.
Is the header text confined to the right hand side and is only allocated a certain amount of percentage space?

I have tried deleting out the container command in header.tpl and changing it to container-fluid but made no difference, there is obviously a command somewhere telling the header not to display the text if it feels there isnt room ?

xairflyer wrote: ↑

Sat Apr 01, 2017 7:02 pm

there is obviously a command somewhere telling the header not to display the text if it feels there isnt room ?

Correct. Look for the media-query classes in stylesheet.css, bootstrap.css and bootstrap.min.css - I don't remember specifically what class controls hiding the text at a certain resolution, but that's where you'll find what controls it. If you don't want it resizing at the current level, just bump the min/max values up accordingly. (Backup before you make any changes, it'll likely take a few trial and errors before you get it perfectly, if you've never worked with media queries before)

For the element inspector, once you get that window open, if you hover over the divs and css classes on the left panel, you'll see their related and pseudo elements in the right column. From there, hover your mouse over the class you want to tick or untick, and a checkbox appears that lets you modify the classes on the fly (the changes aren't saved, the site will be back to normal if you re-tick the box or refresh the page)

Thanks I understand now much better about the inspector.

I have change nearly everything I can see that could make a difference but no luck, the bootstrap.css file seems to be the spot where it could be, I have changed the widths to the extent that when I do view in 1280 the text is jammed
together in the middle of the header but still displaying, and when at 1024 I can have it to the other extreme but no text displayed.
I have even changed every overflow command I can see in the bootstrap.css file to visible and it still makes no difference,
I am thinking I probably need to change things in different files, and not looking for just one magical command to make the text show.

Its after 2:30am now and my head is fried might attempt the bootstrap.min.css file tomorrow but it is hard to read as everything is on one line ! over 122K characters of it !

I have realised I have posted this in the wrong forum so have reposted in support