Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #212461

    Hello.

    I need to display multiple images in a post as a grid (mini gallery per post). As the main page of gallery.
    I tried to fill this structure with css class:

    <style>
    .model-gallery ul {
    	list-style-type: none;
    	padding: 0;
    	margin: 0;
    }
    .model-gallery ul li {
    	float: left;
    	margin: 0 10px 10px 0;
    }
    .model-gallery ul li:nth-child(5n) {
    	margin-right: 0;
    }
    .model-gallery ul li a {
    	float: left;
    	cursor: pointer;
    	text-decoration: none;
    }
    .model-gallery ul li a img {
    	float: left;
    	border: 0;
    }
    </style>
    
    <div class="model-gallery">
        <ul>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="1.jpg" alt=""></li>
        </ul>
    </div>

    But the images are displayed underlined and dots on <li> elements.

    I tried this style in a separate html file (without WP) – everything works. Probably some kind of css conflict?

    Maybe I can use your style, which displays a small images on the front page?

    Thank you for help!

    #212547

    Hi mik0s!

    Please give us a link to the page with the custom gallery. We need to inspect it.

    Regards,
    Ismael

    #212673
    This reply has been marked as private.
    #213184

    Hey!

    Its a background image so adding background: none and forcing it will remove it from showing:

    .model-gallery ul li {
    float: left;
    margin: 0 10px 10px 0;
    background: none !important;
    }

    Regards,
    Devin

    #213206

    No effect :(

    #213370

    Hey!

    Devin’s code actually works but you made a typo on background style. Please copy&paste the code directly from below

    .model-gallery ul li {
    float: left;
    margin: 0 10px 10px 0;
    background: none !important;
    border-bottom: none!important; }

    Regards,
    Yigit

    • This reply was modified 3 months ago by  Yigit.
    #213385

    Oh, sorry. Copy&past but underline photos were underlined ((

    #213396

    Hi!

    I have just updated the code i posted in my previous post and added !important rule to border-bottom. Please try it now.

    Regards,
    Yigit

    #213397

    Hi!

    I have just updated the code i posted in my previous post and added !important rule to border-bottom. Please try it now.

    Regards,
    Yigit

    #213403

    Yes! Thank you very much!

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Gallery in Post’ is closed to new replies.