Community Forums › Forums › Archived Forums › Design Tips and Tricks › Image sizing on mobile
- This topic has 3 replies, 2 voices, and was last updated 10 years, 5 months ago by Robin.
-
AuthorPosts
-
November 9, 2013 at 3:35 pm #71897mborgerMember
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/downloadNovember 10, 2013 at 12:41 pm #72087RobinMemberIt 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)
November 11, 2013 at 1:57 pm #72341mborgerMemberThanks. 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 onIt 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?
November 11, 2013 at 2:34 pm #72344RobinMemberHmmm, 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)
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.