Image sizing on mobile

Community Forums Forums Design Tips and Tricks Image sizing on mobile

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Robin 9 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #71897

    mborger
    Participant
    Post count: 108

    Hello. I have images sized correctly on my site but they appear too small on the mobile (iPhone) site. In particular, I’m referring to the Apple and Android ‘download’ image buttons on http://funthingsapp.com/download

    Is there a way to keep them the same size on the website but a bit larger when viewed on a smartphone? I don’t think they serve as good call-to-action buttons right now on the iPhone. This is on the Outreach theme.

    Thank you.

    http://funthingsapp.com/download
    #72087

    Robin
    Participant
    Post count: 318

    It looks like you have your coding styled into your buttons, which makes it hard. If you pull out the things like width and probably alignment, add a class to your link (hypothetically, like a class=”store-button” href=”..”), then you can put something like this in your stylesheet:

    .store-button {
    width: 30%;
    display: inline-block;
    margin: 0 auto;
    }
    

    I’m totally guessing on what the styling should be–you’d want to experiment to see what works (might need to do a one-half div around them instead, maybe, which might even be easier than styling them separately, plus it might let you skip the next part). Then you would want to go to your media query section for phones and make the width of each button or div be 100%, display block, float none, something like that. Again, guessing. I style by playing with Chrome’s Developer tools until it works.

    HTH


    I do the best I can with what I’ve got. (say hey on twitter)

    #72341

    mborger
    Participant
    Post count: 108

    Thanks. I added that code block to my style.css and changed my image elements to

    <a class="store-button aligncenter" title="Download the Fun Things app for iPhone!" ...... and so on

    It didn’t produce any change. (I added the aligncenter, but that didn’t affect it)

    I put in the half div codes but it shrunk both images and separated them far apart.

    I’m also an admitted coding novice. Did I miss something?

    • This reply was modified 9 months, 3 weeks ago by  mborger.
    • This reply was modified 9 months, 3 weeks ago by  mborger.
    #72344

    Robin
    Participant
    Post count: 318

    Hmmm, I don’t see the class=store-button aligncenter” in your a tag or your img tag. I do see the .store-button in your CSS. Try adding the class to your code in your editor, make sure you remove the width=30% from the buttons themselves, and then give this a go in your stylesheet (no one-half div or anything, don’t worry about that, but this worked when I dinked around with it in Chrome on your site):

    
    .store-button {
    width: 30%;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    }
    @media only screen and (max-width: 600px) {
    .store-button {
    display: block;
    width: 60%;
    margin: 10px auto;
    }
    }

    I think you have extra centering going on with both your a tags being set up to center, the text-align being set to center, and the div? labeled center wrapped around those buttons, although I don’t think that one is doing alignment.

    This did work for me just with a quick messing around but hopefully it will help you–


    I do the best I can with what I’ve got. (say hey on twitter)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.