How to change <div> size based on devices

I am having a website already developed using Expression Engine. Currently if i open site on mobile phone or other device few sections cut off from the screen.

After debugging i found that i need to change height of DIV <div id="tabmiddle" style="height:1500px;"> in respect of device. I am very new to expression engine.

I am looking out something like

    if (Mobile Device)
{
 <div id="tabmiddle" style="height:2000px;">

}else if(Tab Device)
{
<div id="tabmiddle" style="height:1800px;">

}else
{
<div id="tabmiddle" style="height:1500px;">
}

Solution

Look into media queries.

Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.

They allow you to apply specific styles based on the screen dimensions.

For example:

@media (max-width: 600px) {
  #tabmiddle {
    height: 1500px;
  }
}

This will change the height of your element with tabmiddle as the ID to 1500 pixels high whenever the screen is smaller than 600 pixels; typically a mobile/tablet device.