Full width image when centered content

  • I would like to have full width images on my site, but I would like the text content to NOT be full width since it’s hard to read.

    How can I change either the text content width OR the image width?

    These are my options now:
    – When I set the default layout to be centered the text is a good with but the images are then too small.

    – When I set the default layout to fullwidth both text and images are fullwidth, then I would like to set the text width to smaller.

    Can you please help me?

Viewing 12 replies - 16 through 27 (of 27 total)
  • Thread Starter karinlin

    (@karinlin)

    Hi again Bojan, sorry to bother again ?? I just noticed a problem with my site after the changes.

    It’s exactly as I would like it on the startpage (the blog) and the blog posts when you click into them. But I noticed that on the pages (for example: https://karintri.com/race/ ) there I had set default layout as left centered and with a right side widget. Now they are wrong, and taking the whole width, pushing the right side widget down. How can I change that?

    /Karin

    Hey Karin,

    We should be able to override the previous settings with some custom CSS just for default page template, so please try adding the following:

    .page-template-default div#primary {
    width: 61.5763547%;
}

    Hope this helps ??

    Cheers,
    Bojan

    Thread Starter karinlin

    (@karinlin)

    Great, it worked. Thanks!

    Happy to help ??

    Cheers,
    Bojan

    Thread Starter karinlin

    (@karinlin)

    Hi again, I have two new issues with my webpage. Do I need to create two new threads in the forum or can I get help here?

    Issue 1: I would like the pictures to NOT gray out on mouse-over, this happened when scrolling.

    Issue 2: I would like to remove the text below the comment box on every post, where it says “F?ljande HTML-taggar och attribut ?r till?tna: <abbr title=””> <acronym title=””> <b>

    <cite> <del datetime=""> <i> <q cite=""> <s> <strike> "

    Can you please help me? Thank you in advance!

    Thread Starter karinlin

    (@karinlin)

    Hmm, the text I meant in issue No 2 is seen at the bottom here:

    https://karintri.com/2015/08/12/infor-ironman-kalmar-viktoria-johnsson/#respond

    Hey again Karin,

    Generally if the question is unrelated to the one you opened thread with you should start a new one for the sake of other members and it also makes easier to find solution to threads when searching through forum.

    With that being said since you already posted a question I’ll respond ??

    To remove image hover you can try adding the following CSS:

    #primary a img:hover {
    opacity: 1;
}

    As for the allowed tags below comment box you can try adding the following:

    p#form-allowed-tags {
    display: none;
}

    Hope this helps ??

    Cheers,
    Bojan

    Thread Starter karinlin

    (@karinlin)

    Thanks for your help, it worked! Ok, then I know for next time!

    Glad I could help ??

    Have a nice weekend!

    Cheers,
    Bojan

    Is there anyway to make the front page image full screen on Spacious. Ample or any other Grill Theme theme?

    Hey RGC1961,

    Please open a new thread with your question ??

    Best regards,
    Bojan

    Thread Starter karinlin

    (@karinlin)

    Hi again Bojan,

    The script above that changes the text width, is it possible to avoid running that script when on mobile device or smaller screens? It seems like it is slowing down my site, and its really not necessary to change the text on small screens, its fine then to fill out the screen.

    Or if we must run it at all times, can we change it so that the text fills out the width on smaller screens like mobile.

    Can you please help me again?
    Thanks

    Karin

Viewing 12 replies - 16 through 27 (of 27 total)
  • The topic ‘Full width image when centered content’ is closed to new replies.