Swapping Divs & spacing issue

[bininandra]

Hello,

I consider myself a HTML / CSS junior but have managed to create a responsive HTML newsletter but have two issues that i desperately need a help with please!

Newsletter can be viewed here – all CSS in header:
http://www.kreativebarn.com/rare/hotpod/hp_stripped.html

1) The gap below ‘Pic 1’ – for the life of me, i cant work out what’s going on with this and how to get rid of it.

2) When collapsing below 600px (mobile), I’d like ‘Header 2’ text (and button) to appear below ‘Pic 2’ (like it does with ‘Pic 1’ section).

I’ve followed a few things to try and get that to work, but does not seem to be working.

Appreciate any help!

Cheers

Bini

[Shikkediel]

The gap below the picture is an empty line. You can remove it with this for example:

img {
 display: block;
}

Edit – I don’t see how one could swap elements inside a table by the way.

[bininandra]

Thank you for replying @shikkediel – its sorted out the gap issue!

I have updated the doc and now just need to sort out the issue when collapsing for mobile, I need pic 2 to be above sub heading 2, is this possible?

http://www.kreativebarn.com/rare/hotpod/hp_stripped.html

[Shikkediel]

Apart from using Javascript, I wouldn’t know how to approach that in this particular situation myself…

[bininandra]

Ok. No probs.

What’s the best way to collapse to mobile and retain the blocks side by side, rather than below each other?

[Shikkediel]

Probably a table-layout: fixed and children that are 50% width. I think you might need a bit of box-sizing too because of the padding. Hints can be found here:

stackoverflow.com/17358739

If you post a demo on Codepen, it would be a lot easier for people to have an attempt at modifying the actual code…

[Oliver.bonnet]

Thank you for the feedback Shikkediel :)

[Author]

Posts