CSS Coding to fix Theme on another Screens

[clemie]

There's a section of coding you can add to your Style sheet, at the bottom or i suppose where ever and it causes it to fix the size proportions on different screen resolutions, can anyone tell me what that is? I can't seem to find it or remember what it was.

[Philip]

Media Queries is what you are looking for.

// screen widths ONLY up to 768px 
//
@media print, screen and(max-width="768px") {

   textarea { font-size: 1em; }

}

// screen widths of 768px and above
// 
@media print, screen and(min-width="768px") {

  textarea { font-size: 2em; }

}

// handheld only
@media only handheld {

   textarea { font-size: 1.25em; }

}
Make sure you add the following Meta tag to your forum wrapper html


<meta name='viewport' content='width=device-width, initial-scale=1.0' >

[clemie]

I added it and it says error

prnt.sc/ik4m16

sorry if I added it to the wrong place i appreciate your time and help c:

[Brian]

Philip's syntax is incorrect on both of the lines where you're meant to define a width.

This shouldn't throw any errors:

// screen widths ONLY up to 768px 
//
@media print, screen and (max-width:768px) { 

   textarea { font-size: 1em; } 

}

// screen widths of 768px and above
// 
@media print, screen and (min-width:768px) { 

  textarea { font-size: 2em; } 

}

// handheld only
@media only handheld { 

   textarea { font-size: 1.25em; } 

}

[clemie]

oh thank you. that didn't give me any errors but didn't seem to fix the problem.. hmm maybe im in the wrong section or maybe it's the board remodel?

My boards show up fine
prntscr.com/ik51h2


but my friends screen cuts them off?
prntscr.com/ik51oc

I thought it was just the board remodel but then it would be off on all of our screens correct?

[Philip]

Brian Damn spaces get me every time

clemie can you provide link to your forum ? A picture paints a thousands words but not when it comes to debugging unfortunately.

Media queries won't solve any issues on the page unless you explicitly tell it to change how the layout behaves at certain breakpoints.

Regardless your image shows a desktop view, so the problem is unrelated to media queries.

[clemie]

thewildside.boards.net/

^-^ thanks

[Philip]

yeah media queries won't work with this theme unfortunately as the tables containing the contents are explicitly set inline.

A complete re-write would be needed to allow for a fluid/responsive layout.

[clemie]

oh man n_n that sucks. Well thank you for your help ^_^ hope for the best lol.