Comic Fury Webcomic Hosting - So...my layout is broken on mobile

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > So...my layout is broken on mobile
Pages: [1]

"So...my layout is broken on mobile", 25th Jun 2018, 4:18 AM #1
Bizfurd
🐩 Poodle Lover 🐩
User avatar
Posts: 2451
Registration date: 17th Mar 2016
Location: I don'tt know what do you want from me
Alright. So I spent a large chunk of the day HTML coding my comic site, and I think it turned out okay.



I switch over to my phone to see what it looks like on mobile...and...



Yeah. Now, I have it set so the background doesn't scroll, and I know that doesn't work on mobile, but here the background just doesn't show up at all. Not only that, but those blurred out windows are just super janky. (They're supposed to be blurry, but here they show the wrong parts of the image.)

I know why the text is wrong, but I still really hope someone can help. If you have any idea what's wrong, I can send you my source code via PM, but I didn't want to put it here because I didn't know exactly where the issue was.

Any and all help would be appreciated. Thanks!
_______________________

image

I know this banner is old shhh
25th Jun 2018, 6:27 AM #2
Teslaverian

User avatar
Posts: 868
Registration date: 17th Oct 2010
Location: Texas
The site appears to be working properly on my phone (iPhone, using Safari). The background shows up, anyway.

Since mobile doesn't support fixed images, the blurry image used for the comments section is aligned to the bottom of the screen. If the non-blurry background image actually shows up on your phone, it will still match since it will also be aligned to the bottom.

One possibility is that the background image just isn't loading. It is a pretty large image (1500x600ish) and isn't very efficient since you're having to load both the blurred and regular version. You would probably be better off making a tiled background that just repeats about 1/3 of that horizontally. Either that or it could be something weird with your device/browser. What are you using?

I'm a little confused as to why you say the comments section is showing the wrong part of the blurred image. What are you wanting the site to look like on mobile?

EDIT:
To fix a bit of the weirdness with the blurry sections, you should probably change the #title and #contentwrap CSS to something like background-color: #ADD2E4 to match the rest of the image
_______________________
--------------------------------- COMING SOON ---------------------------------
image
25th Jun 2018, 3:55 PM #3
Bizfurd
🐩 Poodle Lover 🐩
User avatar
Posts: 2451
Registration date: 17th Mar 2016
Location: I don'tt know what do you want from me
Thanks for the help!

I use a slightly older Samsung J3 phone, so that might be part of it.

About the blurry sections, changing it to that color would probably work for mobile, but on desktop, it will look wrong since it will always be on top of the background at first. Although, that might not be what you meant at all, I don't know much about css and HTML.

I could definitely make the background smaller and simpler if that would help loading.

I've seen some sites whose mobile layouts are completely different from the desktop ones. Is that possible with CF?
_______________________

image

I know this banner is old shhh
25th Jun 2018, 8:39 PM #4
Teslaverian

User avatar
Posts: 868
Registration date: 17th Oct 2010
Location: Texas
You're welcome! The reason I suggested changing the color was actually to fix an issue I saw on desktop. Since the background color for the blurry section matches the regular section, it looks like it sort of disappears after a point when you're scrolling.


It is possible to make different mobile layouts, though it might take a bit of restructuring for your CSS/HTML. What you'll use is media queries, which allow you to change the look of the layout based on things like how wide the browser window is. On my site, I have things that look a certain way if the window is larger than 800px wide for desktop, and smaller than 800px for mobile.

For example, you could tack this on to the bottom of your CSS to remove the background image when the window is smaller than 800px.
@media (max-width: 800px;) {

  body {
     background-image: none;
  }

}
_______________________
--------------------------------- COMING SOON ---------------------------------
image
Forum > Layouts, HTML, CSS & Javascript > So...my layout is broken on mobile
Pages: [1]