Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Force center of content adaptive website

    In the past I've been told I type to much so will limit and provide as needed. On the desktop I have a webpage with two tables left justified:



    In my PHP someone can say they only want the one table (http://myurl?onetable=1). When the PHP is set thru the URL to not display the second table I get:



    As you see, the title doesn't recenter based on the smaller content and the page doesn't use the full screen width so don't want it to center by "page width".

    Here is my media query to do the initial center with two tables. Using media queries because I have views for iphone, ipad, etc also.

    Code:
       
    @media only screen and (min-width : 1224px) 
    {
        th { font-size: 1.6em; font-family:Sans-serif; }
        td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;}
        h1 { font-size: 1.75em; line-height: 1.5em; }
        h2 { font-size: 1.25em; }
        table { width: 500px; align: left; }
        .centering {width:1020px; padding-top:5px; 
                    border:0; margin-top:2px; text-align: center; 
                    font-size: 1.6em; font-family: Sans-serif; 
                    font-weight:bold;}
    }
    And my PHP to output the title:
    Code:
    echo "<p class='centering'>Pool Mining: " . strtoupper($obj['multiport']['mining']) . "</center></p>";
    Any way to make the title dynamic based on the width of the content itself and not the full page?

    Thoughts?

    Thanks.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    If I understand what you're trying to do correctly, if only one table is to be displayed, the title should have a smaller width than the 1020px currently assigned to it via the class centering.

    Assuming that you can't just do this with css because of the other elements on your page, then I think the simplest thing would be to conditionally set the class vie PHP dependent on the number of tables to be displayed. So, if you have another css class:

    Code:
    .centering_onetable{width:510px}
    Then your PHP could do something like this (pseude-code):

    PHP Code:
    if(isset ($_GET['onetable'] && $_GET['onetable']==1){
       
    $titleclass 'centering_onetable';
    } else {
       
    $titleclass 'centering';
    }

    echo 
    "<p class='".$titleclass."'>Pool Mining: " strtoupper($obj['multiport']['mining']) . "</center></p>"
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. That has potential. The only other one besides the desktop that is an issue is my iPad. All the other devices will reorient the second table under the first anyway so one table or two doesn't matter. I'm thinking my best bet is to get the desktop and the iPad version of the two table to be identical sizes. I right now have the desktop width of the tables wider than the iPad so would have to update the iPad landscape CSS as well based on if it's an iPad or not. Easy based on your suggestion, just wondering to myself if it's worth it. Let me try this and see how it goes.

    Thanks.

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wanted to edit my post but looks like I can't. Thought about this and think the multiple devices is going to be an issue. If it's an iPhone portrait or landscape, my media query is fine. If it's an iPod or iPhone 5th gen my media queries are fine. If it's an iPad "Portrait" my media queries are fine. Only issues are the desktop and iPad in landscape. Only times I will need to do as you suggest is with the iPad in landscape and the desktop which I'm managing in Media queries.

    Code:
    /* desktop */
    @media only screen and (min-width : 1224px) 
      {
        th { font-size: 1.6em; font-family:Sans-serif; }
        td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;}
        h1 { font-size: 1.75em; line-height: 1.5em; }
        h2 { font-size: 1.25em; }
        table { width: 500px; align: left; }
        .centering {width: 1020px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;}
      }
     
    /* iPad in landscape */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
      {     
        th { font-size: 1.6em; font-family:Sans-serif; }
        td { font-size: 1.95em; line-height: 1em; }
        h1 { font-size: 1.75em; }
        h2 { font-size: 1.25em; }
        table { width: 475px; align: left; }
        .centering {width: 975px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;}
      }
    
    /* ipad in portrait */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
      { 
        th { font-size: 1.5em; font-family:Sans-serif; }
        td { font-size: 1.6em; line-height: 1em; }
        h1 { font-size: 1.65em; }
        h2 { font-size: 1.15em; }
        table { width: 475px; align: left; } 
        .centering {width: 475px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.5em; font-family: Sans-serif; font-weight:bold;}
      }
     
    /* iPhone 4 retina portrait */
    @media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) 
      {
        td { font-size: 1em; line-height: .6em; }
        table { width: 315px; }
        h1 { font-size: 1em; }
        h2 { font-size: 1em; }
      }
     
    /* iPhone 4 retina landscape */
    @media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) 
      {
        td { font-size: 1em; line-height: .6em; }
        table { width: 470px; }
        h1 { font-size: 1em; }
        h2 { font-size: 1em; }
      }
     
    /* iPhone 5 or iPod Touch 5th generation, portrait */
    @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation:portrait) 
      {
        th { font-size: 1em; font-family:Sans-serif; }
        td { font-size: 1em; line-height: 1em; font-family: Sans-serif; }
        table { width: 315px; }
        .centering {width: 315px; padding-top:0px; border:0; margin-top:2px; text-align: center; font-size: 1em; font-family: Sans-serif; font-weight:bold;}
      }
     
    /* iPhone 5 landscape */
    @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) 
      {
        th { font-size: 1em; font-family:Sans-serif; }
        td { font-size: 1em; line-height: 1em; }
        table { width: 558px; }
        h1 { font-size: 1.75em; }
        h2 { font-size: 1.25em; }
        .centering {width: 558px; padding-top:0px; border:0; margin-top:2px; text-align: center; font-size: 1em; font-family: Sans-serif; font-weight:bold;}
      }
    So obviously I do not want to overwrite the media query styles if they are on other devices or even the iPad in portrait.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •