CODEWITHSUNDEEP
htmlcssexpressionengine
Code Hungry
Code Hungry

Reputation: 4000

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;">
}

Upvotes: 0

Views: 6753

Answers (2)

Vikas Kumar
Vikas Kumar

Reputation: 739

You can use following two media rules to do this:

For Mobile devices (width<768px):

@media (max-width: 768px){
  #tabmiddle{
    height: 2000px;
  }
}

For Tab devices (width<992px):

@media (max-width: 992px){
  #tabmiddle{
    height: 1800px;
  }
}

If device width is 992px or more than that, it will follow your default CSS height written in style tag of tabmiddle element.

Upvotes: 0

Matthew W.
Matthew W.

Reputation: 409

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.

Upvotes: 5

Related Questions