Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Swapping Divs & spacing issue

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #287848
    bininandra
    Participant

    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

    #287865
    Shikkediel
    Participant

    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.

    #287977
    bininandra
    Participant

    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

    #288054
    Shikkediel
    Participant

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

    #288058
    bininandra
    Participant

    Ok. No probs.

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

    #288073
    Shikkediel
    Participant

    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…

    #288118
    Oliver.bonnet
    Participant

    Thank you for the feedback Shikkediel :)

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.