Small Troubles With Simple Template

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Small Troubles With Simple Template

Postby MouseWithADinosaurTail » September 12th, 2018, 2:30 pm

Hello! I was wondering if anyone had some advice on how to go about fixing the simple template on my comic site. Right now, while it does get fixed if you zoom out, my comic pages and other images break out of the page boundaries at 100% zoom. My pages are just standard 11"x8.5". I'm not sure what the recommended page sizes are, but it's a bit late to go and change all my page sizes. Does anyone have any advice on how to fix it? Would I have to pick a new template?
User avatar
MouseWithADinosaurTail
 
Posts: 6
Joined: July 14th, 2018, 10:54 pm

Re: Small Troubles With Simple Template

Postby eishiya » September 12th, 2018, 3:20 pm

Do you mean the "Simple and Clean" layout? It's meant for desktop screens, and your pages look fine on desktop! The container is set to be 70% of the screen width, which can be a problem with large pages like yours (1200px wide is quite wide!) when viewed in smaller windows. Breaking out of the container allows the page to remain fully visible even if your window is too small.

You've got two options, besides leaving it as is:
A. Set a minimum width on the container so the container is always big enough for the page. This will fix the breaking out, but still allow the apge to be scrolled.
B. Make the page scale automatically to fit within the container as it shrinks in size with the window. This looks nicer and avoids unnecessary scrolling, but the drawback to this is your page will be unreadably small in small windows.

Something to keep in mind is that for readability, a certain minimum size on pages (and therefore also the screen used to view them) is to be expected. There's no perfect solution at every size. Scaling down to a certain point is a nice solution, a combination of the options above - set a minimum width on the container, but it should be a relatively small width (e.g. 700px), and then have the page scale to fit. That way, it'll never get smaller than a certain size, and will require scrolling on very small screens.

Also, the web works in pixels, not inches. Your page is 1200px wide, and that's the measurement that matters. That's oversized for standard-dpi screens, but it's nice for high-dpi screens.

By the way, when asking for help with your site, I recommend leaving it as-is. When you switch templates, it's hard to see what the problem is or to suggest fixes xP The other template you've chosen does the combined trick I described above though.
Image
User avatar
eishiya
 
Posts: 9481
Joined: December 5th, 2009, 11:17 am

Re: Small Troubles With Simple Template

Postby MouseWithADinosaurTail » September 13th, 2018, 12:22 am

Oh whoops! I was messing with the template a lot earlier, but I thought I changed it back to what it was before anyone saw this thread. Sorry about that! It's back to what it was before, though.

But yes, I did mean the Simple and Clean template.

So, question... As for option A and B, how would I go about doing either of those? I know absolutely nothing about html or coding.
User avatar
MouseWithADinosaurTail
 
Posts: 6
Joined: July 14th, 2018, 10:54 pm

Re: Small Troubles With Simple Template

Postby eishiya » September 13th, 2018, 8:15 am

In Overall Template, find this line:

Code: Select all
<link href="http://www.smackjeeves.com/templates/simple_and_clean/style.css?v=2" rel="stylesheet" />


Right under it, add this code:
Code: Select all
<style>
#comic_image {
   width: 100%;
   height: auto;
}
#container {
   min-width: 700px;
}
</style>


This is a "style" element containing two CSS rules. The first makes the comic image scale to fit the size of the container (which is the thing with the black borders, and which scales to fit 70% of the available width). There's already a default style that prevents the image from being wider than 1200px. The second rule gives the container a minimum width of 700px, so that even on small screens, it's not too small to read. This also makes sure other elements don't break out of the layout, such as comments and the banner.
The first line of code I mentioned, the one below which you should add this, imports the default CSS for that template. Putting this custom CSS below it makes it override conflicting rules in the default CSS.
Image
User avatar
eishiya
 
Posts: 9481
Joined: December 5th, 2009, 11:17 am

Re: Small Troubles With Simple Template

Postby MouseWithADinosaurTail » September 13th, 2018, 8:33 am

Ah, it worked! :D The pages now stay in the borders, even if I zoom in to 200%. Thank you so much for your help! I really appreciate it.
User avatar
MouseWithADinosaurTail
 
Posts: 6
Joined: July 14th, 2018, 10:54 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 1 guest