[Laura]

I have edited the images on the homepage of my site (www.handwrittenlegacies.com) so that they are centered, full size and have an image CSS “full-width” yet the images do not span the full width of even the text body on the same page.

Please advise, thank you.

[Pratik]

Hi @Laura,

If is because images have margons. Use following code in Appearance=> Customize=> Additional CSS box:

.home #content img {
    margin: 0;
    width: 100%;
}

Regards,
Pratik

[Laura]

This worked. But is there anyway to make images span the same width as the slider at the top of the home page?

[Pratik]

Hi @Laura,

Add following code:

#primary {
    padding-left: 0;
    padding-right: 0;
}

Please note that this will also increase your texts above slider same width as slider.

Regards,
Pratik

[Pratik]

Hi @laura,

When you add above css, the content on mobile phones might liik too close to the screen. So try following code if mobile view is not to your liking.

@media screen and (min-width: 1450px) {
    #primary {
        padding-left: 0;
        padding-right: 0;
    }
}

What this does is only add the CSS if screens width size is greater than 1450 px, i.e your slider image width.

If you want it on smaller screens, try reducing 1450 to 1200 or 900 and so on.

Regards,
Pratik

[Laura]

You are correct, it made the text the same width as the photos which puts it too close to the edge. Is there a way to differentiate with code? I feel like there should be a way to just make the images full width and allow the text to keep a reasonable margin…

I tried the second piece of code that you provided and I honestly could not tell a difference.

Please advise,

Thanks,
Laura

[Pratik]

Hi @Laura,

Second code will only take effect on mobile devices. Try it with and without code and see the changes.

For what you want, please remove previous codes and add in following:

.home #content img {
    margin: 0 -35px;
    max-width: 110%;
    width: 110%;
}

Let me know how it goes.

Regards,
Pratik

[Laura]

This seemed to work really well! Perhaps just one final issue? The whole page seems to want to scroll on the horizontal. And the featured content section at the bottom of the page (the images and text) appear to be justified to the left.

Any way to remedy this issue?

Thanks so much for all of your help!

[Pratik]

Hi @Laura,

I do not understand what you mean by The whole page seems to want to scroll on the horizontal. About the Featured Content Issue, it is justified left as all your content. Also, left justification is good for readability.

If you want it text to be totally justified, try following code:

#featured-content .entry-content {
    text-align: justify;
}

Regards,
Pratik

[Author]

Posts