Size of Mosaic in a full page template

svanui · Member · Jun 30, 2014 at 3:33 am
Copy link

Add topic to favorites
Hi guys – how do I change the width of a mosaic across a full page template? At the moment it looks narrow and I would like it to take the whole width of the page. For an example of what I mean, see the Bengie’s Corner Page on sv-takeiteasy.com

The blog I need help with is: (visible only to logged in users)
vinoddalvi · Member · Jun 30, 2014 at 9:49 am
Copy link
You can increase the width of full page template by adding the following CSS code in your site using CSS editor.
```
body.full-width .entry-content {
         margin: 0;
}
```
svanui · Member · Jun 30, 2014 at 10:01 am
Copy link
This code changes the margin but this is not what I was after. What I would like to be able to do is change the width of the mosaic so the block of pictures is taking the width of the page, not half of it as is currently the case… see the Page called Bengie’s Corner to see what I mean.
svanui · Member · Jun 30, 2014 at 10:03 am
Copy link
forgot to say… I don’t want to change the size of the pictures, but display more of the pictures across the page rather than down the page… Hope this makes sense.
vinoddalvi · Member · Jun 30, 2014 at 10:08 am
Copy link
Sorry for misunderstanding.

Try using the following CSS code.
```
div.gallery-row {
           width: 100% !important;
}
```
svanui · Member · Jun 30, 2014 at 10:14 am
Copy link
Sorry – didn’t change the mosaic width… (the bit with pictures arranged in the “cool mosaic” style. The cod changed other pictures in the blog posts, which I didn’t want… So removed that bit of code.

Any other suggestion? Thanks for your patience… and availability.
vinoddalvi · Member · Jun 30, 2014 at 10:45 am
Copy link
The gallery is generated by JavaScript and the size and position of images are computed by it dynamically so we have limitations to modify it using only CSS.

You can display the images in one row using the following CSS code but keep in mind it will have glitches due to limitations.
```
body.full-width div.gallery-row {
        width: 400px !important;
       float: left;
}

body.full-width div.tiled-gallery {
        width: 100% !important;
}

body.full-width div.gallery-group.images-1 {
        width: 280px !important;
}

body.full-width div.gallery-group.images-2 {
        width: 120px !important;
}
```
To display two blocks of images in one row we need more space which we can generate by using the CSS code provided in the previous reply.

Due to lack of enough space i have reduced the width of images using the above CSS code therefore some images display stretched.
svanui · Member · Jun 30, 2014 at 10:59 am
Copy link
OK – a bit too hard… I will leave as is. But thank you for all your assistance. Much appreciated. Regards – Chris
vinoddalvi · Member · Jun 30, 2014 at 11:00 am
Copy link
You’re welcome :)
designsimply · Member · Jun 30, 2014 at 10:21 pm
Copy link
how do I change the width of a mosaic across a full page template

First, it always helps a ton to have an example link to look at. I researched your blog and I think you are probably talking about pages like this one where you have modified the width of text using custom CSS:
http://sv-takeiteasy.com/our-boat/

The width of embedded media like the tiled mosaic gallery is set by the “Content Width” setting in the blog. You can update it from the Appearance > Customize > CSS panel in your blog dashboard.

Try updating the content width setting in Appearance > Customize > CSS editor to 800 on your blog to see if that solves the problem. After you make the change, make sure to test pages where you modified the width of the content container as well as a post where you didn’t to make sure both types of content still look good.
svanui · Member · Jul 1, 2014 at 8:08 am
Copy link
Hi – I have tried it and although it displays across the page, it mucks up other areas, so I have reverted back to what it was and decided to use the tiled gallery rather than the mosaic.

What I was actually looking for was not so much to stretch the same number of photos across the page, which your suggestion achieves, but have a mosaic with more photos across the page. Somehow I can fill the page using the square tiles display, but can’t do it with the mosaic without doing a wholesale pixel change as you advised.

Judging from the comment made by Member “vinoddalvi”above, it’s more complicated than I can manage.

But thanks for your suggestion. And by the way, I have been blown away by the amount of assistance available. My site looks heaps better thank to the great support I have received.
designsimply · Member · Jul 1, 2014 at 4:10 pm
Copy link
I have tried it and although it displays across the page, it mucks up other areas,

I was afraid of that. :(

What I was actually looking for was not so much to stretch the same number of photos across the page, but have a mosaic with more photos across the page.

Meaning you wanted to add more columns? vinoddalvi is right about a script setting that part and that you cannot change it using CSS.

And by the way, I have been blown away by the amount of assistance available. My site looks heaps better thank to the great support I have received.

Thanks! I love hearing that!

No items found.