Full-width images

  • Hello community

    I would like my website to show large images in full width of the page. I cannot understand why the image is narrower than the text body. In the page editor it looks fine and big and filling the entire width og the page, but on the front end it doesn’t look good. Here is an example on my site:

    https://frederikbramming.dk/en/portfolio/madaworks

    The vimeo embed obviously works fine, but how can I make the image below appear the same width?

    Cheers, Fred

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter fbramming

    (@fbramming)

    Well, I have located some of the problem and managed to make it work but in a very complicated and uncombersome way. You can see how it’s supposed to look here:

    https://frederikbramming.dk/da/portefoelje/madaworks

    I am by no means an expert, but I found this in the html code around the image:

    sizes="(max-width: 676px) 100vw, 676px"

    I changed that to:
    sizes="(max-width: 1290px) 100vw, 1290px"

    and now it looks perfect! But it’s quite annoying that I have to do that for every page. Is there a way of changing the Stylesheet with some code, so that it happens automatically every time?

    Sorry if I am not using the correct terms! Hope it’s understandable!
    Cheers
    Fred

    img {
    max-width: 100%;
    height: auto;

    try replacing it with width:100% only. It should work.

    Thread Starter fbramming

    (@fbramming)

    Good suggestion!
    I wrote this in the stylesheet of the child theme:

    img {
width: 100%;
height: auto;

    It fixed the problem, but created another – now all images on my site are max size – including the flag icon in the menu bar and images that I have set to medium size. :-/
    Any suggestions to fix that?

    You should find a div id or class for your post and add image class width:100% to it. example – .posts img {width:100%;} which will make images in post 100% width of the page.

    .content.full-width .posts img {width:100%;} < try playing with div codes.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Full-width images’ is closed to new replies.