Mobile view and available width of the body content
Permalink Browser Info Environment
Hello!
I was wondering if there is any easy way to fix the available width and real estate on mobile view.
The mobile view port is centred but there is too much padding on the side which is due to a media query
This is in responsive.less which is a compiled version being rendered out.
This make it quite unusual on mobiles where the viewable area seems to be quite less.
See attachment 1 - where the media query and the width of 310 px in action.
If I remove this by fiddling in browser it makes it perfect.
See second attachment.
I am not quite sure why do we need to have 310px locked down for mobile view.
Hence, I was wondering if I can get an easy fix for this.
Thanks,
Sharad
I was wondering if there is any easy way to fix the available width and real estate on mobile view.
The mobile view port is centred but there is too much padding on the side which is due to a media query
@media (max-width: 479px) .container, #header.full-header .container, .container-fullwidth { width: 310px !important; }
This is in responsive.less which is a compiled version being rendered out.
This make it quite unusual on mobiles where the viewable area seems to be quite less.
See attachment 1 - where the media query and the width of 310 px in action.
If I remove this by fiddling in browser it makes it perfect.
See second attachment.
I am not quite sure why do we need to have 310px locked down for mobile view.
Hence, I was wondering if I can get an easy fix for this.
Thanks,
Sharad
| Type: | Ticket |
|---|---|
| Status: | Archived |
Try this:
@media (max-width: 479px) {
.container,
#header.full-header .container,
.container-fullwidth { width: auto !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
.container,
#header.full-header .container,
.container-fullwidth { width: auto !important; }
}
@media (max-width: 479px) {
.container,
#header.full-header .container,
.container-fullwidth { width: auto !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
.container,
#header.full-header .container,
.container-fullwidth { width: auto !important; }
}
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
You can comment out that line?