Page 1 of 1

Solved: Hide image in col-sm-1 from mobile view with css

Posted: Thu Jun 07, 2018 5:14 pm
by Jansuh
Hi there,

Opencart 2.1.0.2, default template

I have added a small logo from my external review company in the header of my site.
I did this by changing my header.tpl file. Made the col-sm4 from the search bar a col-sm3 and added a col-sm1 at the end and put the logo in that.

Works like a charm for desktop and tablet view. I mobile view all the col-sm parts stack under each other and then this logo stands very ugly between the product bar and the menu.

Is there a way to not show this col-sm1 in mobile view with a css <span> or something?

I found this piece of code online, guess the answer is in there but cannot find it myself.

@media only screen and (max-width: 760px) {
[id="block-yui_3_17_2_15_1486677828083_6486"] {
display: none;
}
}

Thanks for your help.

Re: Solved: Hide image in col-sm-1 from mobile view with css

Posted: Thu Jun 07, 2018 5:26 pm
by Jansuh
Solved it.

Add the following to your stylesheet.css
@media screen and (max-width: 786px){.col-sm-1{display:none;}}