CSS: responsive image position and links

  • Author
  • #63748

    Original poster

    It’s been a while now using Zuki, and I really love it!!

    I have a question, I’m wondering if you can help… I’m trying to create something on CSS, but I don’t manage.

    On my about page (http://shutterandink.com/about-me/) at the bottom, I’ve created a table to keep all elements contained in their place. However, this table isn’t responsive. Each circle links to a post.

    Can you help on how to do that just by using CSS? The idea being that if the screen is wide, you can have maybe 2 lines of 3 circles each. Can that be made? I’ve tried searching online, but I am not being lucky with the actual code… :(

    Also, how do I eliminate the line under images when they are links? I would know how to do this, but I don’t seem to manage.

    Thank you so much in advance!!!


    The blog I need help with is: shutterandink.com


    Theme Author

    Hi Marta,

    I’m so very sorry for my late reply to your questions. Thanks so much for your feedback, I’m happy that you like the Zuki theme :)

    Since it’s a customization I can only to to help you out, since I can not test it myself, but I would recommend the following:

    In the page HTML editor could wrap each link (a-tag) in an extra div container and assign a float left and display: block CSS element to it, like so:

    <div style="display: block; float: left;">Your first link here...</div>
    <div style="display: block; float: left;">Your second link here...</div>

    and so on…

    Regarding the underline of images, could you maybe link me to an example, so that I can see the code and try to fix it this way.

    Thanks a lot! And thanks a lot for your patience!
    Best, Ellen


    Original poster

    Hi Ellen,

    No problem! To be fair, the fact that you didn’t reply straight away helped me try to find a solution myself! I haven’t found one that works as I want it, but still trying.

    So the CSS code you shared here, is that to create the view of the circles one next to each other, but still responsive? Basically I need the links to be in the images, so when I click on one image, it takes to the relevant post.

    Currently, I have this HTML (I hope I manage to show it here with the code markup…):

    <div class="favouriteposts">
    <a href="link 1"><img class="circular" src="image 1" alt="image 1" width="200" height="200" /></a>
    <a href="link 2"><img class="circular" src="image 2" alt="image 2" width="200" height="200" /></a>

    After, the CSS looks like this:

    .circular {
    	width: 180px;
    	height: 180px;
    	border-radius: 90px;
    	-webkit-border-radius: 90px;
    	-moz-border-radius: 90px;
    	background: url('http://link-to-your/image.jpg') no-repeat;
    	position: relative;
    .favouriteposts {
    	max-width: 700px;
    	padding: 10px;
    	margin: 0 auto;

    Not sure if that’s how it should work… I found that coding somewhere, I left the background one in the CSS because I’m not sure what it does, even though there’s no image linked to it!

    I finally got rid of the underline by giving the images a border=0 in CSS, which seems to work for now.

    I’ll try the code you suggest!

    Thank you so much for getting back to me :)

The topic ‘CSS: responsive image position and links’ is closed to new replies.