Are there any options to edit the default display for mobile devices? More specifically I want to be able to show the default tablet view for phones also AND be able to specify exactly how the site is being displayed on different devices.
The default smart phone view is completely useless on a phablet. I will be an absolute horror to manually edit / change all the CSS manually. I’m hoping there is a quick solution or a master variable in the css i can change without too much work.
Also, shouldn’t pages be displayed using the iPad / tablet settings on an i.e. iPhone 6 Plus?
IPAD LANDSCAPE
1019px - 1140px
IPAD PORTRAIT
768px - 1018px
It’s a 1920×1080 device and way above the theme phone width-range:
0 - 767px
Or is there a smart way om disabling theme media queries completely?
Hello Phonetic,
Unfortunately, our theme does not have such an option to offers you the way to disable the responsiveness, sorry! Please notice that this is the standard theme’s behaviour and you cannot change the structure of this because it is not a simple task and you can damage the layout of the theme very easy. If you want to adjust the theme after your desires, please notice that require more additional customizations through code that involve custom work. Please consider hiring a freelancer/developer to help you because we cannot provide customization services at the moment, sorry!
Thank you for your understanding!
Hi Phonetic,
You can always add your own CSS to target specific devices. For example, you can add your own custom CSS between the bracketed areas below. Then just copy it into the code section in the theme panel (you don’t have to just use the widths set out in the “Advanced code” section).
Cheers,
John
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
ADD CSS YOU WANT TO CHANGE
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
ADD CSS YOU WANT TO CHANGE
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
ADD CSS YOU WANT TO CHANGE
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
ADD CSS YOU WANT TO CHANGE
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
ADD CSS YOU WANT TO CHANGE
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
ADD CSS YOU WANT TO CHANGE
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
ADD CSS YOU WANT TO CHANGE
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
ADD CSS YOU WANT TO CHANGE
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
ADD CSS YOU WANT TO CHANGE
}
