trebuchet | The lost UI for App Engine | iOS library

This seems like a good use-case for CSS grid.

The containing element can have display: grid and a grid template with three columns.

The first column is 1fr to fill up 1 portion of the available space.

The second column is 475px wide (or however much room you want your image to take up).

The third column is 1fr again to fill up a second portion of the available space.

Because the first and third columns split the remaining space evenly, they will automatically center the second column.

Use the sizeHint() of the widget:

This property holds the recommended size for the widget [...]
The default implementation of sizeHint() returns an invalid size if there is no layout for this widget, and returns the layout's preferred size otherwise.

^{(emphasis mine)}

The preferred size for a layout is the preferred size for all child widgets (and layouts) managed by that layout. What you'll get will be the computed size based on the various size constraints (minimum/maximum/fixed sizes), hints and policies of each child item.

The problem here isn't that you're using:

You need to use a force-printed scriptlet () to prevent the HTML from being escaped.

[Y]ou’ll need to force-print if your scriptlet’s output intentionally contains HTML or scripts that you want to insert exactly as specified.

It does not work because the media query is written wrong you did not change anything in the media query. You should add new css rules to the media query. add the rules you want for 800px width in the media query

Have you tried different values for white-space on the code and parent pre element? Seems to fix it right up for me.

You should not use float on the image. You should wrap your three images inside a div and then use flex on the main image div. Check out my example below:

according to w3 schools

position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

=> position relative does not remove the element from the page flow

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

=> element is removed from the page flow

• src you probably need to position with absolute

Take out the number after you click on the button not before. Everything else is great.

TIP: As you are adding the number there must be always a type number so it would be better to add type="number" on input so that the user cannot enter alphabets or special characters.