Skip to main content

Forums

This topic contains 6 replies, has 3 voices, and was last updated by  Oliver.bonnet 2 months ago.

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)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star