October 18, 2013 at 8:25 pm #477
I added a gallery of 8 popular images on my home-page. It looks good on a wide screen but overlaps the side bar on smaller screens. On my cellphone it does not line up vertically like the rest but sticks out to the right.
Does anyone now how to do it better?
This is the code of my gallery:Popular Images
And I added this in styles.css:
}October 18, 2013 at 10:46 pm #5395
The reason people are staying away from using
is that it often doesn’t play nicely with all devices, especially newer mobile type systems. That may be the reason it’s not displaying properly. Specifying containers with Style sheets can help the images to spill over to the next line instead of overlapping.
JoOctober 19, 2013 at 6:59 am #5396
Thanks Jo. I already assumed that using
causes the problem, but honestly I had no idea what the alternative could be. So now I try to find some tutorials about containers and start to “play” with them.October 19, 2013 at 11:17 am #5397
I am very rusty so DO NOT QUOTE ME but have a read up on style sheets and then use either aor and then apply styles to it. Centre your content, borders, padding, etc. Remember to create a unique style element for it so that it doesn’t make others or s go nuts. You can style a , so that your “Table” is in the middle of the page (or whichever parent container it resides in), you can then also style it so that the content (inside) is aligned left, right, or “center”.
So style your “Container” (replaces
and I think a span is probably better? Can’t recall) and then you can also style your images too if you like. You may want borders on them, you can apply padding to them so they space out evenly, etc. This way the container will stretch with the page. Well, that is if you do not specify widths of course. If you do want to specify widths rather use percentages that grow with your page size.
I suggest you go look up the exact coding as I won’t give you any that may very well be incorrect. It’s been a few years since I designed a web page. 😀
JoOctober 19, 2013 at 1:30 pm #5398
What happens if you find and use the coding for one of the other units edit that
http://kerioakimaging.com - trying to reopen
http://nail-art-at.kerioak.com - Art and Nail ArtOctober 19, 2013 at 1:46 pm #5399
Thanks a lot for that details Jo!
And yes, Christine, I thought about that way too, perhaps I can just duplicate “featured images” … hope I will find it 😉October 19, 2013 at 2:38 pm #5400
You can just duplicate the code but you MUST assign it a different “Class” or if the existing code changes… it will ALSO change your container 🙂
So the best is to assign something out of the ordinary it’s own name. Like “FrontPageContainer” or “ImageDisplayContainer”. Something logical that you will know what it is just by looking at its name.
You must be logged in to reply to this topic.