Docs

[tom h]

Hi

I’m trying to use essential grid for ease of use for my client.

I’m having trouble with image sizes ideally I want 250px width and max height 300px I’m using masonry to avoid image cropping but I can’t seem to get the desired width without getting grey bars to the left.

I tried width on container cover and image then image with no overflow and desired parent widths. is there a simple setting within the settings for this as I can’t seem to figure it out ?

I have guttering of around 15px;

Please advise (this is a local built)

Thanks

[Lely]

Hello Tom,

We love to check the issue you were having but then you need to upload it on a staging server. It’s hard to recommend something that we can’t access. To save us both time from going back and forth, please do setup a staging server and then give us the link and we will be happy to help you.

[tom h]

Hi

Lely I have come up with a solution,

Thank you for your reply thought I powered through as I understand it’s a pain to help if it’s offline.

I do however have another quick question is it possible to have the post page ..

.entry-title {

font-family: Century , sans-serif !important;
font-size: 30px;

}
.entry-featured {
border-radius: 100%;
width: 200px;
height: 200px;
border: none;
margin-bottom: 50px;
}
.entry-thumb, img {

height: 200px;
width: 200px;
border-radius: 100% !important;

}

.entry-content ,excerpt {

float: right !important;
width: 700px;
*/
}

So that the featured image floated left and the excerpt is floated right inline with the image, I do not know php but from how the css is responding it seems each has a separate parent making this difficult without having some weird nesting issues?

Please advise

Thanks and sorry to be a pain

[tom h]

Ok I can see I was wrong on the parent front but still a little lost

[Lely]

Hi Tom,

From your CSS, check this part:

.entry-content ,excerpt {
float: right !important;
width: 700px;
*/
}

Let’s remove */ because that is CSS syntax error. Should be like this:

.entry-content ,excerpt {
float: right !important;
width: 700px;
}

As of the moment, I am not entirely sure on which part you’re lost and what you’re trying to achieve. What stack are you using? Just to clarify, the issue right now, is you’re desired display on single post page, right? Please check this link:http://theme.co/x/demos/. Select which demo represents you’re current setup. Go to the demo blog single page that looks like your blog single pages. That way we have a common ground. Give us the link and then using the demo page, please do describe on detail how you want it.

Cheers!

[tom h]

This reply has been marked as private.

[Rad]

Hi there,

Would you mind providing the site’s URL that has this? It doesn’t look like masonry, hence, might be conflicting with the structure.

Thanks!

[tom h]

This reply has been marked as private.

[tom h]

I am so sorry this is actually in regards to the original question but in the case of media queries.

[Rue Nel]

Hello There,

Thank you for the clarifications! Actually you cannot simply set a 250×300 grid item. Please keep in mind that the grid will look into the different settings like the number of columns to display, the boxed, fullwidth or cobbles layout, the media ratio, the grid item spacing and a lot more to consider. You must also consider the responsiveness of the grid items in varous screen sizes.

If you just want to avoid image cropping, please do not make the images as a background cover. You can set it as contain to make sure that the full image will display. All you need to do is edit the skin of your grid and find the Layout > Media Fit setting. Please see the screenshot below:

Hope this helps.

[tom h]

Hi Thank you

I have has some luck and managed to use this setting you gave in conjunction with a vw size on the section and row in corner stone to get an over all size that suits devices without having to restrict the grid itself

Many thanks

[tom h]

It looks great on any size screen so far but I have just noticed it is still so small on one of smaller mobile devices this is with minimal css I have removed everything to demonstrate.

As you can see it’s so small you can’t interact with it, I’m super happy with everything else it all looks great.

[tom h]

If I add a width to esg-overflowtrick it give it a usable size but them throws it off centre and I can’t responsivley centre it.

Please advise.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:767px){
div#esg-grid-1-1 {
    padding: 0 !important;
}
}

Hope it helps.

[tom h]

Amazing thanks you Christopher all I needed was that id been trying everything I could find in inspector haha.

Thanks again

[Author]

Posts