html help

Does anyone know how to make an image not show on a responsive template when it is resized? 

I need to have the image show on full size view, but then as the template is resized to its smallest, the image needs to not show at all. Not trying to get it to resize, just not show!

 

Any help appreciated :-)

Quote · 23 Oct 2013

The only thing I can think of is to perhaps use some javascript that can detect the dimension of the browser window and if certain size, then change the css of the image tag to display:none.

Geeks, making the world a better place
Quote · 23 Oct 2013

One of my templates has a responsive.css file....

Within it is code like this-

@media (min-width: 421px) and (max-width: 680px) {
.topMenu table { width:450px;  margin:auto;}
#sys_main_logo { width:450px; }
#sys_main_content { width:450px; margin:auto;}
#sys_ml  { width:450px; }
#sys_mc_wrapper    { width:450px; margin:auto;} 
#page_column_1 { min-width:450px; max-width:450px; margin-left: 5px;}
#page_column_2 { min-width:450px; max-width:450px; margin-left: -5px;} 
#sys_main_menu { max-width:450px; }
.sys_sub_menu { width:450px;}
#sys_mm { max-width:450px;}
}

@media (max-width: 420px) {
.topMenu table { width:275px;  margin:auto;}
#sys_main_logo { width:275px; }
#sys_main_content { width:275px; margin:auto;}
#sys_ml  { width:275px; } 
#sys_mc_wrapper { width:275px; margin:auto;}      
#page_column_1 { max-width:275px; margin-left: 5px;}
#page_column_2 { max-width:275px; margin-left: -5px; }
#sys_main_menu { max-width:275px;}
.sys_sub_menu { width:275px;}
#sys_mm { max-width:275px;}
.sys_breadcrumb { max-width:275px; margin:auto; margin-top:8px;}
.sys_copyright { max-width:275px; margin:auto; margin-top:8px;}
.sys-service-menu-wrp {position: relative; margin-bottom:10px; top: 10px;right: auto; width:205px; margin-left:auto; margin-right:auto;}
#sys_search {position: relative; top: auto; right: auto; left: auto; margin-bottom:10px; }
#sys_ml_wrapper {text-align: center;}
}

As GG said- You would need to add in "display: none;" (for whatever you are trying to hide) into one of the correct sections or screen sizes you're trying to apply this configuration to.

Mind you, your template may be different.

Quote · 23 Oct 2013
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.