Why isn’t the image full width?

  • Resolved michalrama

    (@michalrama)


    2 months, 3 weeks ago

    First of all, I wish you a happy new year.

    I’m redesigning the website. It’s not complete yet, but I’m stuck on a problem with the image width. I’m adjusting it using this code.

    const scrollTop = window.scrollY;
        if (window.location.pathname === '/') {
            const element = document.querySelector('#tlacitko img');
            const position = element.getBoundingClientRect();

    	if (scrollTop === 0) {
                $("#tlacitko img").css({
                	position: 'relative',
    		left: -position.left,
    		top: -position.top,
                    zIndex: "5",
                    width: "1920px"
                });
            } else {
                $("#tlacitko img").css({
                	position: 'relative',
                    zIndex: "5",
                    left: -position.left,
    		top: "-110px",
                    width: "1920px"
                });
            }
        }

    If I put the position absolute, the page falls apart, so I used relative.

    Even though I managed to position it correctly in the upper left corner, there’s still a gap on the right.

    The problem is because the template has padding-left and padding-right, which results in that gap.

    Is there a way to fix this? Setting the padding to 0 for the images has no effect.

    Please help

    Thank you

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • It seems to be affected by the CSS of the parent element .zak-container, which has a max-width: 1920px; set.
    You can try adjusting the CSS of .zak-container.
    Below is the screenshot from my testing.

    Thread Starter michalrama

    (@michalrama)

    Hello @poku1010

    Thank you. It looks good. But there is one problem that I forgot to mention. The reason I tried to set it only for the image is that if I set it for .zak-container, it also affects its content, which I didn’t want. You can see it clearly in your printscreen for the menu. When it’s stuck to the edge of the screen, it doesn’t look nice. That’s why I wanted to set full width only for the image.

    Thread Starter michalrama

    (@michalrama)

    Hello @poku1010

    So I did it this way.

    const newImg = $('<img>', {
        	id: 'new-img',
    		src: "https://skolkaadis.euweb.cz/wp-content/uploads/2022/11/Navrh-bez-nazvu-e1666377754550.jpg",
            css: {
            	filter: "brightness(120%)",
    			position: "absolute",
    			left: "0px",
    			top: "0px",
    			zIndex: "5",
    			width: "100%",
    			height: "auto"
            }
    	});

    // P?idáme obrázek do stránky
    $("#page").append(newImg);

    I deleted the image from the page. Then I created it and added it cleanly using Jquery to another element that does not limit the width. So I can simply set the absolute position to 0 and the width to 100%.

    This solves the problem,

    Thanks for your effort anyway.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.