CSS: responsive image position and links

  • Author
    Posts
  • #63748

    marz81
    Member
    Original poster

    Hi!
    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!!!

    Marta

    The blog I need help with is: shutterandink.com

    #64078

    ellenbauer
    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

    #64079

    marz81
    Member
    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>
    ...
    etc.
    ...
    </div>

    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 :)
    Marta

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