Need some code help please

[jsfotoParticipant]

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:

.DivImagesPopularText

{

position: relative;

top: 45px;

text-align: center;

color: #A4A4A4;

font-family: Arial;

font-size:17pt;

}

.DivImagesPopularImages

{

position: relative;

top: 20px;

}

[JoRodriguesParticipant]

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.

Jo

[jsfotoParticipant]

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.

[JoRodriguesParticipant]

I am very rusty so DO NOT QUOTE ME but have a read up on style sheets and then use either a

or 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 other

s 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. 😀

Jo

[ChristineParticipant]

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 Art

[jsfotoParticipant]

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 😉

[JoRodriguesParticipant]

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.

Jo

[Author]

Posts