ThemeShaper Forums » Thematic

[closed]

Mobile devices not honoring background image height.

(14 posts)
  • Started 7 years ago by whiteweazel21
  • Latest reply from whiteweazel21
  • This topic is not resolved
  1. whiteweazel21
    Member

    Hello,

    I am following this thread with great interest, however, in the mean time I am looking for a simple approach to get an unoptimized mobile version of my site without glaring layout issues:
    http://forums.themeshaper.com/topic/responsive-web-design-and-thematic

    This particular problem occurs when opening my website, www.bookboxshop.com on a mobile device (specifically looking at iPhone and iPad), when opening the site in a horizontal view. For instance, this page that has both text and an image: www.bookboxshop.com/about

    You can see a screenshot of the problem here: http://tinyurl.com/426xkn7

    For some reason, the entry-content overlaps the background image placed in content. Is there any way to get these mobile devices to respect this background image height so that the entry-content text sits above the image?

    Thanks for any suggestions!

    Posted 7 years ago #
  2. vicky515
    Member

    Your website doesn't seem to be working, but specifying a background image height doesn't prevent text from going over it - Mobile or not. In fact, specifying the background height likely doesn't do anything at all, really. It's a background; it's meant to be in the background. If you want the images to be stand-alone items, they cannot be backgrounds.

    I hope this is clear to you...

    Posted 7 years ago #
  3. whiteweazel21
    Member

    Ah yes, I did have a bit of complications and the site went down, but I was able to restore it and have since made multiple back ups in multiple locations lol.

    It's a clear explanation. So basically I will need to find some way to add the image without using "background" or "background-image" from within the css stylesheet. From my initial research, it seems that you can only add an image using css using "background" or "background-image".

    So, what would be the best way to add the image without using css, or possibly there is some css work around, perhaps if I used a div and placed the image inside that?

    Thanks so much!

    Posted 7 years ago #
  4. whiteweazel21
    Member

    Ugh...well I guess what you are most likely pointing towards is using a function to place the image. Functions are something I avoid like the plague lol (I just have absolutely no programming background).

    Posted 7 years ago #
  5. whiteweazel21
    Member

    I tried using a basic function to add a div, and attach an image that way, however it seems that whichever thematic hook I try to use, the entire layout just gets really bizarre and random. I guess this idea is going to be rather complicated to bring to fruition!

    Posted 7 years ago #
  6. whiteweazel21
    Member

    I'm thinking... if I just created a function to create a div, and then used css to apply a background image to the div, could that possibly work? I figure that way maybe the background would be contained in the div rather that be dispersed into the content and mixing in with text.

    I guess I will give that a shot..

    Posted 7 years ago #
  7. vicky515
    Member

    It won't be difficult, it's just a matter of trying to figure out what the best location for it would be for your layout.

    Using http://visualizing.thematic4you.com/ I would suggest starting with thematic_abovefooter()

    So let's say your function is

    function my_awesome_function() {?>
    <div id="not-really-background-background"><img src="/images/books.jpg"></div>
    <?php }

    You could even leave out the div and just have the img tag. Just depends on what meets your needs...

    Then you'd hook it like so...
    add_action('thematic_abovefooter', 'my_awesome_function');

    The only problem with this approach is that it will apply the image to every page, so maybe then you might want to use CSS for specifying that image for a particular page ID (I believe you were doing something similar to this before?)
    Let me know how that goes... It's completely untested and I'm still learning :)

    Posted 7 years ago #
  8. whiteweazel21
    Member

    Ah, what a super link, this should help a lot. I used a sligtly different function that was more messy than yours, and also tried the thematic_abovefooter and thematic_belowcontainer.

    The problem there is that it really skews the layout into a total disaster. I think part of the problem is, if you view my website, I ended up placing the gradient you see on the bottom in #wrapper. Instead of floating over the gradient as a transparency, the div with image displaces the gradient (which begins to make things tricky for me haha).

    I suppose I could edit the image to include the gradient as opposed to just the png item hovering over the gradient. And then I could try to have the wrapper align with that image, if possible.

    What would you or anyone else suggest? Maybe at this point in time I should just avoid optimization/screw the mobile platforms (bad idea imo)? Or perhaps I've reached my limit and need to look into hiring someone to finishing off these remaining few issues.

    Posted 7 years ago #
  9. vicky515
    Member

    I don't actually see the image on the site, or the new div
    http://www.bookboxshop.com/about/ right?

    What you're explaining it pretty unclear to me

    Posted 7 years ago #
  10. vicky515
    Member

    I don't know if this helps, but I'd remove all the background-related CSS you have in the wrapper and put this in the body.

    body {
        background: url("images/gradient.png") repeat-x scroll center bottom #000000;
    }

    Also remove the height: 100% from "body, html, #wrapper"

    I'm not sure if you had a reason for using wrapper though, but this is what I would have done.

    Posted 7 years ago #
  11. whiteweazel21
    Member

    Hey Vicky,

    I put the height:100% in body, html, #wrapper because this somehow aligns the header/content/footer. When I remove it, there are some layout problems. Honeslty, it's my first website and first time using css, so maybe this is because of something else, I don't know because I've just been doing the css by trial/error.

    I will try your suggestion of putting the background image in the body instead of the wrapper. I think there was a reason for not using body, but I will give it another shot. At least maybe I can use some of that code to clean up mine.

    I removed the image from the about page temporarily (just restored it to the old css code until I can resolve it), because the div did not work for a few reasons. First would be the layout issues, and second is because the image from using a div code inserts to all pages rather than a specific page. So the "about" image is on the home page, about page, contact page, etc.

    I will try to explain more clearly. I gave the "about" page image as an example, but the images on the home page, about page, and product detail page are all done in this method:

    1: I put a png gradient into the wrapper as a background image (will try to put into the body). I have the gradient set with a low z-index in the css so it will stay under anything I put over it.

    2. I take my product images of the book boxes in Photoshop, make a selection, and delete the background so just the image is solid and the rest is transparent (no background). I save these images as pngs since they are transparent.

    3. Next, I place the product images as a background image in the css. Since these images have no background, and a higher z-index, these get placed over the background.

    So what I think happens when I use a function/div, is that this new div with the same product images displaces the gradient, rather than staying or "hovering" over it like previously.

    Sorry, it's so complicated haha.

    Posted 7 years ago #
  12. whiteweazel21
    Member

    I actually may have found an easier work around, however there are some things I still need to iron out.

    While I tried it before and it did not work, it appears min-height does work if I set it to a pixel amount (I apply it to main). This works great, except that to set the min-height to work for my iphone, it messes up the height on the main website due to resolution differences.

    I suppose I will need to research how to scale this min-height value depending on the resolution or something of that nature. Wouldn't this be easier?

    For example, would something like this work? The values are random, but can I just throw this in my css and it would work? Then I can make a few of these for different resolutions, and change the min-height according to resolution and the page itself.

    /* when the users browser size is below 320px */
    @media screen and (max-width: 320px) {
    	#min-height:200px;
    }
    Posted 7 years ago #
  13. whiteweazel21
    Member

    Haven't had much time to work on the site, but I was thinking, on the iphone/ipad, the site loads almost perfectly in the vertical position, it's just the horizontal poisition that has this issue. Maybe there is some setting in the css that is causing this?

    I think I will also try to install a new childtheme and insert the images, and see if the problem persists.

    Posted 7 years ago #
  14. whiteweazel21
    Member

    Ah... thought I figured something out but in turns out not to be the case. It seems the problem is related to the background image and its height settings. The entry content shares the space of the background image height, and it seems the iphone is having problems rendering it or something along that nature.

    I will try and play with the background image height settings, maybe the answer is there somewhere.

    Edit: So what I found out is that adding "height:100%;" is what I am using in the style.css background-image to push up the text over the background image. Without this value, the text goes over the image like on the iPhone. So for whatever reason, the iPhone is not seing this height:100% and is not rendering properly.

    I don't know if this method of using the height:100% is the proper way to do this? Maybe I can create the background image with a larger height that encompasses the text area, and see if, with some luck, that might work.

    Edit 2: Hmm, well I tried to set to background image height to 500px. There was a very minor change on the desktop browser, but on the iphone, the text got pushed way above the header and only a tiny bit remained - so that idea does not seem to work either.

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.