Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

I'm trying to to design a nice page for my game. Any way I can make an image take up the full width?

A topic by Kasper Hviid created Jan 18, 2021 Views: 1,744 Replies: 7
Viewing posts 1 to 8

I have screenshot set to hidden, and places the images inside the middle column. But the image gets a 20 pixel border at the left and right, despite being 960 pixel wide. Any way to make it fill out the entire column?

(3 edits) (+1)

Hi, 

Did you already try to force it a little? You can do that adding a CSS property to the div where your image is contained, or directly on the img element.

Raw example:

<div style="put inline CSS code here">  ...your content here... </div>

And about the appropriate CSS line I think to remember you have to play with width and height. I say I think to remember because I believe some adjustments may be require because of parent containers layouts.

Example from my creator page:

<img style="border:15px solid white; width: 50%; max-width:100px; padding: 10px;" src="<a href=...here goes a link itch create when adding an image</a>">

You could play with width and max-width I hope.

Some links:

https://www.w3schools.com/howto/howto_css_full_page.asp

https://stackoverflow.com/questions/26033347/display-image-full-size-css

I'd recommend W3Schools to refresh HTML & CSS

https://www.w3schools.com/html/html_css.asp

https://www.w3schools.com/css/css_dimension.asp

I hope this helps a bit!

Good luck!


PS. Sorry for all the edits. Something weird is happening when I add the second code section

Hi again,

Did you try this?

https://www.w3schools.com/css/css_image_transparency.asp

Image opacity

Hi, thanks a lot for your suggestions, but I still can't get it to work. I think I saw one page doing it, or maybe I'm mistaken.

Transparency is fun, I guess, but not really what I'm after at all, or do I misunderstand something?

The .view_game_page .formatted_description section of your page (where your content is added) adds a 20px left and right margin, so full width is really 920px.

If you have custom CSS enabled, you could remove it there

I'm not sure. I've re-read again your first post. What I understand is that you're trying to place a blank space of 960 pixels inside a column, but you're getting just 40 pixels wide. That was my conclussion because (if I'm correct) you're trying to get a 960px wide area but at the same time you're trying to hide the image. For what I know, if an element is set as 'hidden' it'll not show... not even a blank space.

Is that what you're trying to achieve? If that's the case I still think that you have to play with the column width if you keep the image hidden, or with the image opacity and not using the hidden property.

Another thing, if the image is inside a column, then I suppose that you mean inside a table, so you may have to check the configuration for table, tr and td elements (table, row and cell) just to be sure none of them are giving you trouble.

Sorry in advance if none of this pointers help you.

Good luck!

@Billiam: That sounded like it was supposed to work, but alas, it didn't. But thank you for trying!

@Cimento: Sorry, that was poorly worded. I only meant that, when editing the theme of the page, I had set the screenshot dropdown to hidden, to no longer display the screenshot sidebar. Instead, I pasted the raw url of the images into the games description.

I have found a workaround at this page: It simply uses 1000px wide images instead of 1080px, so that the margin doesn't matter!
https://colorfiction.itch.io/blue


maybe you have to set the page margin, something like:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=960, height=540">
    <title></title>
    <style> body { margin: 0; background: #007777;} </style>
</head>