I recently upgraded to an ipad M2, and the mobile site version doesn’t seem to work like it should. On my old ipad, the search bar was on the top and the tags were all the way at the bottom when I was scrolling through posts. On the new ipad, the search bar and tags are on the left side of the screen (just like it is on desktop). I have tried changing e621 settings as well as requesting the mobile site on firefox. Nothing has worked. Is there something else I can do, or does it just not work?
Topic: Mobile mode doesn’t work
Posted under Site Bug Reports & Feature Requests
Click on "Enable mobile mode support" in the footer.
Or just go here: https://e621.net/static/toggle_mobile_mode
cinder said:
Click on "Enable mobile mode support" in the footer.
Or just go here: https://e621.net/static/toggle_mobile_mode
I have tried both of those things. Nothing changes.
outlook_com said:
I have tried both of those things. Nothing changes.
if I had to guess, it's because your viewport resolution is over 800px. I'm not really sure how we could deal with this...
I'm not sure if there's any elegant solution to this. the only thing I can think of is to copy all of the mobile bit of the stylesheet (sans 800px requirement) and paste it directly into the user stylesheet. either that or find some way to make the website think your screen is smaller, I know you can do that by messing with the text size accessibility settings in Firefox on Android, but I have no idea how iOS browsers handle that (also it'd make every other website also zoomed in, so not exactly a great option).
EDIT: here, this is all of the responsive stuff from 1100 - 800px, but edited so it should work on much larger screens:
/*below is normally for screen widths 1100px and under*/
@media (max-width: 1920px), only screen and (orientation: portrait) {
.related-section {
flex: 0 1 50%;
}
div#c-uploads div#a-new #preview-sidebar {
display: none;
}
div#c-uploads div#a-new .upload_preview_container.in-editor {
display: flex;
flex-direction: column-reverse;
}
div#c-uploads div#a-new .upload_preview_container.in-sidebar {
display: none;
}
div#c-uploads div#a-new .upload_preview_dims {
text-align: center;
}
div#c-uploads div#a-new .upload_preview_img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 500px;
}
div#c-uploads div#a-new .below-upload > .upload_preview_img {
max-height: 150px;
}
div#c-uploads div#a-new .related-section {
flex: 0 1 50%;
}
div#c-uploads div#a-new .flex-grid {
flex-direction: column;
}
div#c-uploads div#a-new input {
max-width: 90%;
}
/*this is normally for screen widths 900px and below*/
#ad-leaderboard {
height: 50px;
justify-content: center;
}
#ad-leaderboard .adzone {
height: 50px;
width: 320px;
}
/*below is normally for screens 800px and below*/
#image-container.blacklisted img,
#image-container.blacklisted video,
.post-preview.blacklisted img,
.post-preview.blacklisted video,
.post-thumbnail.blacklisted img,
.post-thumbnail.blacklisted video {
background-size: 100px !important;
padding: 100px 100px 0 0 !important;
}
body.resp .comment-post-grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
body.resp .comment-post-grid .author-info {
display: grid;
grid-column: 1;
grid-row: 1;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto 1fr;
padding: unset;
grid-column-gap: 0.5rem;
}
body.resp .comment-post-grid .author-info .name-rank {
grid-column: 2;
grid-row: 1;
}
body.resp .comment-post-grid .author-info .avatar {
grid-column: 1;
grid-row-end: 4;
grid-row-start: 1;
}
body.resp .comment-post-grid .author-info .avatar .post-thumbnail img {
height: auto;
max-height: 100px;
max-width: 100px;
width: auto;
}
body.resp .comment-post-grid .author-info .post-time {
grid-column: 2;
grid-row: 2;
}
body.resp .comment-post-grid .content {
grid-column: 1;
grid-row: 2;
}
body.resp div#c-comments div#a-index .comment-post .comments {
margin-left: 1rem;
}
body.resp div#c-comments div#a-index .post-container .post-information {
margin-left: 0.5rem;
}
body.resp div#c-comments div#a-index .post-container .post {
width: unset;
}
body.resp div#c-comments div#a-index div.comments-for-post .comment-post {
display: block;
}
body.resp
div#c-comments
div#a-index
div.comments-for-post
.comment-post
.comments {
width: unset;
}
body.resp div#c-users div#a-show .bottom-section,
body.resp div#c-users div#a-show .stats-section {
flex-direction: column;
}
body.resp div#c-users div#a-show .vertical-section {
flex-direction: row;
flex-wrap: wrap;
}
body.resp div#c-users div#a-show .posts-section {
order: 2;
}
body.resp div#c-users div#a-show .posts-section .posts {
display: block;
}
body.resp div#c-users div#a-show .user-uploads {
order: 1;
}
body.resp div#c-users div#a-show .about-section {
flex-direction: column;
}
body.resp div#c-users div#a-show .about-piece {
margin: 0 0 0.5rem;
}
.mobile-only {
display: unset;
}
body.resp div#c-posts div#a-show .pool-nav li,
body.resp div#c-posts div#a-show .search-seq-nav li,
body.resp div#c-posts div#a-show .set-nav li {
height: 2rem;
}
body.resp #search-box {
display: none;
}
body.resp .mobile-search {
display: block;
margin: 0.5rem 0.5rem 1.5rem;
}
body.resp .mobile-search .search-help {
font-size: 85%;
}
body.resp .mobile-search > .search-form > form {
box-sizing: border-box;
display: flex;
margin-bottom: 0.25rem;
width: 100%;
}
body.resp .mobile-search > .search-form > form .search-input {
flex-grow: 1;
width: 100%;
}
body.resp .mobile-search > .search-form > form .search-input input {
border-radius: 3px 0 0 3px;
box-sizing: border-box;
width: 100%;
}
body.resp .mobile-search > .search-form > form .search-button > button {
border-left: 1px solid #ccc;
border-radius: 0 3px 3px 0;
height: 32px;
width: 32px;
}
body.resp .guest-warning .guest-warning-dialog {
height: 90vh;
top: 5vh;
width: 80vw;
}
body.resp div#page aside#sidebar {
padding: 5px;
}
body.resp div#page aside#sidebar input#tags {
width: 80%;
}
body.resp div#page aside#sidebar button[type="submit"] {
background-color: #eee;
border: 1px solid #c5c5c5;
font-size: 1.2em;
height: 42px;
padding: 2px 10px;
}
body.resp div#page {
padding-left: 0;
padding-right: 0;
}
body.resp div#page > div > div {
display: flex;
flex-direction: column;
}
body.resp div#page > div > div > aside#sidebar {
float: none;
font-size: 1.5em;
order: 2;
width: auto;
}
body.resp header {
position: relative;
}
body.resp #page-footer {
display: revert;
text-align: center;
}
body.resp #page-footer .left {
padding-right: revert;
}
body.resp #page-footer .right {
padding-left: revert;
}
body.resp #page-footer .right:before {
content: "–";
}
body.resp #page-footer .logo-container {
display: none;
}
body.resp #maintoggle {
display: block;
font-size: 2em;
font-weight: 700;
}
body.resp header#top menu form input {
width: auto;
}
body.resp h1 {
display: none;
}
body.resp form button,
body.resp form input,
body.resp form select,
body.resp form textarea {
max-width: 100%;
}
body.resp form select {
font-size: 18pt;
vertical-align: top;
}
body.resp form input[type="email"],
body.resp form input[type="number"],
body.resp form input[type="password"],
body.resp form input[type="text"] {
border: 1px solid #c5c5c5;
font-size: 18pt;
vertical-align: top;
width: 90%;
}
body.resp form textarea {
border: 1px solid #c5c5c5;
vertical-align: top;
width: 90%;
}
body.resp form button,
body.resp form input[type="button"],
body.resp form input[type="submit"] {
font-size: 160%;
}
body.resp form input[type="submit"].tiny {
font-size: 120%;
vertical-align: top;
}
body.resp form.simple_form div.input input[type="email"],
body.resp form.simple_form div.input input[type="number"],
body.resp form.simple_form div.input input[type="password"],
body.resp form.simple_form div.input input[type="text"],
body.resp form.simple_form div.input textarea {
max-width: 90%;
width: 90%;
}
body.resp div#page section#content {
margin: 0;
padding: 0;
}
body.resp #posts #posts-container {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
}
body.resp article.post-preview {
display: inline-block;
float: none;
margin: 0 0 10px;
text-align: center;
vertical-align: middle;
width: 31vw;
}
body.resp article.post-preview a {
margin: 0 auto;
}
body.resp article.post-preview img {
max-height: 150px;
max-width: 31vw;
}
body.resp article.post-preview .desc {
font-size: 100%;
}
body.resp .user-disable-cropped-false article.post-preview {
width: 31vw;
}
body.resp .user-disable-cropped-false article.post-preview img {
height: auto;
max-height: none;
max-width: none;
width: 31vw;
}
body.resp
.user-disable-cropped-false
article.post-preview
img.has-cropped-false {
object-fit: cover;
}
body.resp div#options {
font-size: 24pt;
font-weight: 700;
margin-top: 10px;
}
body.resp div#tags {
margin-top: 30px;
}
body.resp div#tags li {
margin: 10px 0;
}
body.resp div#tags a.search-tag {
font-size: 24pt;
font-weight: 700;
}
body.resp #nav {
display: none;
font-size: 2em;
line-height: 2em;
}
body.resp header#top input {
font-size: 18pt;
}
body.resp header#top menu.main {
padding: 5px 10px;
}
body.resp header#top menu.main .mobile-logo {
box-sizing: border-box;
display: inline-block;
width: 1.5em;
}
body.resp header#top menu.main .mobile-logo a {
background-image: url(/packs/static/main-logo-109ca95d0f436bd372a1.png);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
padding: 6px 10px;
}
body.resp header#top menu.main .mobile-logo a:after {
content: "Placeholder";
visibility: hidden;
}
body.resp header#top menu.secondary.empty {
display: none;
}
body.resp h1 {
display: block;
font-size: 2em;
margin: 1em 0 0;
}
body.resp h2 {
font-size: 0.825em;
margin: 1em 0 0;
}
body.resp header {
line-height: 2em;
text-align: center;
}
body.resp header h1 {
display: inline;
}
body.resp div#page {
margin: 0;
}
}
copy all of that and paste it into the box labled Custom CSS style at the bottom of the Advanced tab in your settings and then click Submit.
do note that this might look _terrible_. if it does consider also pasting the following right after (orientation: portrait) {:
html {
zoom : 200%;
font-size: 200%;
}Updated
Go to advanced setting and switch "Disable responsive mode" to "no"
Hope this helps