Subscribe form spanning header

HTML & CSS
1

Hi - I’m trying to insert a subscribe box with image at the top of my page that looks like this:

Line 1:

long line of text


line 2: [firstname] [email] [download button]
and an image to the right of those 2 lines (height is equal to the height of 2 lines together)

But as you can see here, I’ve made a right mess of it! Please can anyone help?
http://dev.greensmoothie.com/

Ignore the rest of the page. It’s an astra theme starter template I’ve just begun to customize :slight_smile: (and no, that isn’t me with the cool boobs. I’m 73!)

2

Hi,

There are different ways to solve this. :slight_smile:

Simpliest could be to display the lines as table-rows.

3

I think it’s the display: table that is causing the trouble.
The obvious way to me seems to float the image right and leave the header and form in their default block displays to naturally sit one over the next.

4

Hi - thank you, I’m getting there.

(1) The 67x100 image is floating above the header & subscribe box, not to the right of them.

(2) If I place the header-subscribe in a box that floats left, then the header area (logo + menu) moves up to the right of header-subscribe

(3) I can’t get the subscribe boxes to center. I tried placing them in a div of their own with margin:0 auto but that did not work.

(4) The image is not displaying when it’s definitely there in the /imgpg folder.

5

Hey no need to reply for now. I’m working on making it a table instead of float. That should work! Thanks

6

You need to consider how this will display on small smartphone screens. In portrait orientation the width can be as little as 320 pixels (CSS pixels).

I’m a great fan of CSS Flexbox, so this is how I would do it . . . .

Change the width of your browser window to see how that is responsive.

7

Hi - thank you. I appreciate that, have kept it. Meanwhile I’ve just finished using a table from PaulOB’s coding of my old site greensmoothie.com. Does it look ok now?
http://dev.greensmoothie.com

The postit image is displaying in abnormally large size. When I use a physical ruler to measure the image onscreen, across the top of the image, I get:
– in image program, its width 85mm,
– at http://greensmoothie.com, width 105 mm,
– at http://dev.greensmoothie.com, width 115mm

Is that a browser problem that I can’t do anything about?

8

I am seeing the image to be the same size on the old and new sites. It’s 300 pixels wide. With a desktop monitor with a ‘standard’ resolution of 96 dpi (dots per inch) it should be 79mm wide. That’s the width I am measuring with a ruler. I am aware some laptops have significanly higher dpi so the image will appear smaller. Is the zoom of your browser window set to 100%?

3 Likes
9

Thank you! I really appreciate your taking the time Archibald :slight_smile: For some weird reason chrome had set only that page to 110% (or I did in the forgotten mist of times past)

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.