WordPress.org

1. Anonymous
   Unregistered
   Posted 3 years ago #

   Hey there!

   I use my website with my students quite extensively (I teach history and Technology) and am having a minor, but REALLY frustrating issue with the theme.

   I am using the Sketch'd theme from wpdesigners, and everything is perfect except when the page fully loads, you can use the right curser arrow and the page scrolls past the content (wood bg is set to 100%).

   The page also loads all wrong on the iPhone and touch, and it is driving me crazy.

   Is there any chance that anybody out there can tell what the issue is? I would like the site to be right before school starts, and would really appreciate any help that you could provide.

   You can find the site here:

   http://www.mistercitrin.com.blog

   But the problem is also evident in the demo of the theme, so isn't due to my modifications (see demo below)

   http://wordpress-designers.com/sketchd/

   Thanks again!

   Robin.

2. drewactual
   Member
   Posted 3 years ago #

   to get you started:

   replace:
   html {
   min-height:100%;
   height:auto;
   }

   with:

   html {
   min-height:100%;
   height:auto;
   width:100%;
   overflow-x:hidden;
   }

   your background pic is responsible I think...

3. Anonymous
   Unregistered
   Posted 3 years ago #

   drewactual, you are almost an absolute genius!!

   So that took care of it in firefox, but not in safari.

   It almost looks as though the css container that holds the wood background has a set size. When I view it on my (higher resolution) imac at full screen, when I go to macbook size or below, it has the side scroll.

   I have posted an image of the problem here:

   http://www.mistercitrin.com/bugger.jpg

   Thanks so much, I really do appreciate your help thus far!!

   Robin

4. drewactual
   Member
   Posted 3 years ago #

   #feature-repeat {
   margin:0; padding:0;
   width:100%; height:auto;
   background:url(images/feature-repeat.gif) no-repeat;
   }

   w/

   #feature-repeat {
   margin:0; padding:0;
   max-width:100%; height:auto;
   background:url(images/feature-repeat.gif) no-repeat;
   }

   can't test it, don't have the resources here, but give it a shot?

5. Anonymous
   Unregistered
   Posted 3 years ago #

   Okay comrades,
   I'm just having a bear of a time customizing the header in the current template-theme I have. I finally got my title in there, but now it is almost regular text size.

   Also, the columns have disappeared from the page templates!

   http://www.speakspanisheveryday.com

   template: http://www.drikatruu.com

   Should I just switch back to a basic template? This is really rough.

6. Anonymous
   Unregistered
   Posted 3 years ago #

   Thanks again drewactual, but no luck!

   I would be willing to make you an account on the server, if you would be willing to poke around for the answer!

   Hell, I would even be willing to buy you... um, something that a teacher can afford during the summertime ;-)

   Seriously, thanks for your kindness!

   Robin

7. drewactual
   Member
   Posted 3 years ago #

   I think it is actually the pic below the wood panels.. the one to the right. You may try simply cropping it leaving only a thin line of the solid color visible, and then setting the background color of that div to match.. but that is definitely the overflow issue.

   What I would do if it were me, is crop the image's right side- then add to it's original name an x at the end (example: image.gif to imagex.gif) so you don't get them confused, then go to your css and add an x to that call for image... see if it works.. I think it will. Then you will need to identify the color of that images background in hex, and adjust your background color in that div to match.

   some browsers will display the entire pic no matter what you do- which scatters floated div's to hades and back.. talk about a troublesome prospect... you could sit there for hours on end trying to trick the css to make it right!!

8. Anonymous
   Unregistered
   Posted 3 years ago #

   Ok, so you mean the image with the paper clip, quarter, and all of the "stuff" on it on the right side? If so, I tried cropping it width-wise to make it thinner, and it had no impact. So you are suggesting that I make that image just 1 pixel wide and see if it impacts the situation... yes?

   I can try what you are saying, but have no ftp access from where I am (summer school) so I will have to wait until later this afternoon... will report back!!

   Thanks, and have a great day!

   Robin

9. drewactual
   Member
   Posted 3 years ago #

   no you can leave it with all the 'stuff' in it... just on the right side of the image itself, about a third of it is a very light colored grayish blue(?).. that could be cropped off leaving just a sliver or so.. then you could set the background color of the div to match that grayish-blue color.. photoshop or jasc will id that color on hover in a hex id it for you.. if it works like it does in my head (LOL) it will dynamically grow and shrink without a user knowing where it actually starts and stops...if you can follow that!....

   there is another way, but it would be intensive... that is to combine all background images in photoshop, and use them as one single background image in your container div. You would have to anchor them in a specific location (0,0; or top:0, left:0) type environment and set them to 100% for them to scale. But it would likely work. I don't know the effect it will have on the rest of your page because I don't know the structure- honestly I haven't looked that close...

   One more thing, and not to sound like a typical WP support nag, but there are some validation issues with your site. Both css and html do not validate- I looked at that and didn't see anything I could identify readily that would be causing this kind of issue- but bad-validations behave strange sometimes, and things sometimes affect others that you think would be unrelated. Just fair warning... why I say this? It would be a shame to see you 'trick' css to render what you want, just to later validate a page and find a valid page is all screwy... btw- the css validation didn't like my overflow-x declaration for some reason...and I don't know why, it is perfectly legal!!!

   huh...

10. drewactual
    Member
    Posted 3 years ago #

    wait a dang minute...

    is that div set to a defined width? If it is that may be your huckleberry.. Try setting it to a percentage. You will have to play to find the right one... trial and error... but I bet it may help ya out if it is...

11. Anonymous
    Unregistered
    Posted 3 years ago #

    Hey there!

    Ok, now you are over my head. Which div is it that you think shouldn't be a defined width?

    Let me know and I'll try it at a %. Should it be 100%?

    Thanks again!!!!

    Robin

12. drewactual
    Member
    Posted 3 years ago #

    these:

    #content-right {
    margin:0 -308px 0 0; padding:0;
    width:308px; height:239px;
    position:relative;
    overflow:hidden;
    background:url(images/content-right.gif) no-repeat center left;
    float:right;
    }

    #content-right-single {
    margin:294px -308px 0 0; padding:0;
    width:308px; height:239px;
    position:relative;
    overflow:hidden;
    background:url(images/content-right.gif) no-repeat center left;
    float:right;
    }

    maybe crop that pic like I outlined in the other post, and then start playing with widths.. matter of fact the first thing I would do is bust up the background declaration into pieces... i.e.:

    background-image: url(images/content-right.gif);
    background-repeat: no-repeat;
    background-position: left;

    btw- center left is confusing it no doubt... top left, or bottom left no confusion, center left problem, center top, center bottom okay, know what I mean bean? <-- start there

13. drewactual
    Member
    Posted 3 years ago #

    oh, the reason I wold split up long declarations like that background, though there is nothing wrong with the way you did it- is to more easily identify issues like that... you see, the 'center left' thing may freak a browser (especially a smart browser like ff or safari) out a little, and it will ignore everything between the last properly formated declaration and the semi-colon.

    I once scoured a css for DAYS just to find I had done something similar.. A design such as the one you are using looks real nice, but the layout being controlled by so many #'s and .'s can make tracking down things like that really tough.. that is when a validator and and breaking down long 'combined' declarations comes in handy.

    just a suggestion though, and something I do- and I am far from an expert, so I use tricks like that often.

Topic Closed

This topic has been closed to new replies.