creating a border around front page

mediatwentyproductions · Member · Feb 6, 2017 at 6:46 am
Copy link

Add topic to favorites
Hi!

The pictures on my front page are spread to the end of page on right and left. How can I create space between the pictures and end on the page?

Regards,
Wairimu

The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Feb 6, 2017 at 5:17 pm
Copy link
Hi there!

Depending on how thick/what color you want the border to be, you could try some CSS like this:
```
.home .container {
  border-left: 5px solid #fff;
	border-right: 5px solid #fff;
	box-sizing: border-box;
}
```
You can make the border thicker/thinner by changing the two 5px settings, and you can change the color by replacing the two #fff with a different HTML color code. :)
mediatwentyproductions · Member · Feb 7, 2017 at 7:15 am
Copy link
great! thanks! ….another query – On home page on phone the pictures look sharp, but are not so sharp on computer. What could be wrong?

Also
mediatwentyproductions · Member · Feb 7, 2017 at 8:24 am
Copy link
Also, the border on left leaves a small space between the pictures and the border. How do I solve that please? ….I choose an orange border
mediatwentyproductions · Member · Feb 7, 2017 at 8:34 am
Copy link
the space particularly looks worse on mobile phone
staff-loquaciousloon · Staff · Feb 7, 2017 at 3:48 pm
Copy link
On home page on phone the pictures look sharp, but are not so sharp on computer. What could be wrong?

Interesting. The images look crisp on my computer – this is possibly a difference in your computer and your phone. If your phone has a higher resolution than you computer screen, images will look better there. If that’s the case, it’s more to do with the device being used than anything on the site :)

Also, the border on left leaves a small space between the pictures and the border. How do I solve that please?

Ah, I see it. That’s a border around the individual image, so we’ll need some CSS that adjusts for the different number of images on each row at different screen sizes. We want that border on everything except the last item of each row. Give this a try:
```
@media only screen and (max-width: 600px) {
        article.post-archive {
        border-right: none;
    }
}

@media only screen and (min-width: 601px) {
    article.post-archive:nth-of-type(2n+2) {
        border-right: none;
    }
}
@media only screen and (min-width: 783px) {
    article.post-archive:nth-of-type(2n+2) {
        border-right: 1px solid #f7f7f7;
    }

    article.post-archive:nth-of-type(3n+3) {
        border-right: none;
    }
}

@media only screen and (min-width: 1000px) {
    article.post-archive:nth-of-type(4n+4) {
        border-right: none;
    }
}@media only screen and (min-width: 1000px) {
    article.post-archive:nth-of-type(4n+4) {
        border-right: none;
    }
}
```
Let me know how that looks!
mediatwentyproductions · Member · Feb 8, 2017 at 6:30 am
Copy link
it works perfect!! thank you so much :-)
staff-loquaciousloon · Staff · Feb 8, 2017 at 3:00 pm
Copy link
You’re welcome!

No items found.