Tablet View Issues

[tsimarketing]

I plugged that code into our theme options and it did fix the issue with the text on tablet view and it looks good. However, when I look at the icon boxes on desktop and mobile view they are really long. I tried to just change the height of the desktop part of the code, but that changes the height on all views. I thought that if this code had the iPad landscape and portrait height, changing the height of the first part of the code would not mess with with iPad parts of the code. With this code can I adjust the height of boxes separately, so I can make the height of the desktop view different from the tablet view?

Also do you have an update on the header button issues that I mentioned in the post above?

[David Martin – Support]

What CSS are you changing?

It should be this for desktop:

.page-id-52 .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    min-height: 550px;
}

Regarding your header button, you would need to alter your heading padding for the tablet landscape view, ex:

/* iPad - Landscape - Header Buttons */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#header-section #header {
    padding: 15px 15px;
}
}

/* iPad Mini - Landscape - Header Buttons */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
#header-section #header {
    padding: 15px 15px;
}
}

Thanks.

[tsimarketing]

1. Yeah I changed the height in that desktop code, because I wanted the height of the boxes on desktop to be different from the height on tablet view. But when I changed the height in that section of the code it changed the height of the boxes across all platforms.

2. I put that code for the header in and it doesn’t appear to be doing anything. The client area button is still on a different line.

Can we bring another one of your colleagues in on this conversation to see if they may know of another way of fixing these issues. Because it has been about 2 weeks now and we really need these items fixed since we have several people viewing our website daily.

[David Martin – Support]

Hi,

1)

The CSS is correct that I provide you at the time of writing as I have also sent you my screenshots. – I still cannot add CSS to your site also which is a massive hindrance.

I can only re-do the work and then provide you with the updated CSS as your content looks to have changed, another team member will only do the same thing.

If you want customisations for various different screen sizes/device orientations you will need to hire a web developer to assist you.

I have now re-duplicated your content to my dev version, here is the latest CSS for you.

This is for iPad / iPad Mini Portrait and Landscape.

.page-id-52 .custom-height-one .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    min-height: 390px;
}

/* iPad Portrait */
@media only screen and (max-device-width: 1024px) 
and (min-device-width: 768px) 
and (orientation: portrait) {
	.page-id-52 .custom-height-one .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
	    min-height: 650px;
	}
}

/* iPad Landscape */
@media only screen and (max-device-width: 1024px) 
and (min-device-width: 768px) 
and (orientation: landscape) {
	.page-id-52 .custom-height-one .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
	    min-height: 470px;
	}
}

.page-id-52 .custom-height-two .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    background-color: red;
    min-height: 540px;
}

/* iPad Portrait */
@media only screen and (max-device-width: 1024px) 
and (min-device-width: 768px) 
and (orientation: portrait) {
	.page-id-52 .custom-height-two .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
	    min-height: 590px;
	}
}

/* iPad Landscape */
@media only screen and (max-device-width: 1024px) 
and (min-device-width: 768px) 
and (orientation: landscape) {
	.page-id-52 .custom-height-two .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
	    min-height: 840px;
	}
}

2)

The header CSS must be place at the bottom of your CSS, your other customisation is overriding it as you have added it to the top of the CSS. CSS is cascading. Please move the supplied header code to the bottom of the CSS.

You already have this custom code which is causing the issue, the supplied header code must be below that:

#header-section #header {
    padding: 15px 120px;
}

Thanks,
David.