header margins, responsive margins ..

Homepage Forums Pro Support Forum Chooko Pro Chooko Pro Support header margins, responsive margins ..

header margins, responsive margins ..

This topic contains 9 replies, has 2 voices, and was last updated by  Koen 1 year ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #19423
    header margins, responsive margins ..

    Koen
    Participant

    Hi Mathieu,
    How is life? Hope you had a great new years eve.

    I have some issues with a Chooko site.
    ON the above mentioned page “over ons” the margins between the picture and Header 3 are not the same over all. Can you help me to make this clear? IN the CSS I do heave some Custom code’s regarding H3:
    h3 { margin-bottom: 3px; }
    #page-container h3 { margin-bottom: 5px; }

    Besides that I have a lot of trouble getting the fourth picture (Godelief) to go right, with the text left (2/3 column). Sometimes entering this ” ” above the photo or the text helps, but then it disappears and frankly I’m lost.

    Another question is: how do I get the Captions to be this site’s blue in stead of black?

    Hope to hear from you!
    best regards, Koen

    #19424
    Reply to: header margins, responsive margins ..

    Koen
    Participant

    Hi, I have made som changes in the mean time.
    Things are OK now, but I remain curious as to why I have so much difficulties with the picture.
    H3 margins remain unsolved too.

    greetings, Koen

    #19425
    Reply to: header margins, responsive margins ..

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi Koen,

    This new year started pretty well, I hope it has for you as well!

    I suggest you change the content structure and include the pictures in “one-third” columns after the two-third ones (instead of having the pictures just right-aligned before the text outside of any column).
    This will definitely help with alignements and will for sure fix the issue you have with the 4th picture.

    I’m not sure exactly what you had in mind with margins so please let me know if something still needs to be changed once you have made this change.

    For captions, you can use this Custom CSS to change the size, padding and color as desired:

    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        padding: 0 4px 5px;
        color: #333333;
    }

    Edit: I posted this before seing your first reply, but I think it still applies, using two-third columns for the text and one-third-column next to them for the picture is definitely what I recommend!

    • This reply was modified 1 year, 1 month ago by  iceable.
    #19428
    Reply to: header margins, responsive margins ..

    Koen
    Participant

    OK, I’ll see if that works out allright.

    I did notice that when I delete column, I have to go to the text editor in order to clean the code. Ofter some code if left behind. e.g. </div> and that makes everything go weird.

    Is that a general WordPress issue

    #19429
    Reply to: header margins, responsive margins ..

    Koen
    Participant

    Funny thing is: in mobile view the pictures go below the text. IN my first lay-out the pictures did go above the text – where I wanted them. But on the whole this seems to be a more stable solution.

    The thing is that you have to make a compromise between the solid and the mobile lay-out. Difficult choices!

    #19430
    Reply to: header margins, responsive margins ..

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    I could notice that the visual editor in WordPress (TinyMCE) does not always handles the code in a 100% reliable fashion. This does not always cause issues, but it seems that the more you fiddle with some complex structures, the more error-prone it becomes.
    It also tends to do weird things with bits of HTML when you switch back and forth between visual and text mode.

    This seems to happen even when not using the theme’s shortcodes (and also with other theme with no visual shortcodes), but of course using such shortcodes seems to increase the risk of things going funny since some of these shortcodes deal directly with HTML in TinyMCE.

    #19431
    Reply to: header margins, responsive margins ..

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    I didn’t notice your latest post before I replied: the mobile version will display every element in order, but there’s a trick you can use here:

    – Switch the picture columns and the text columns (i.e. place the one-third columns with the pictures before the associated two-third columns with text), so the picture will come first on mobile.

    – Then use “text” editor mode and add “alignright” to each one-third columns so they will go to the right of the text column, like so:

    <div class="one-third alignright">

    I admit this looks a bit “hacky”, but it will do the job without completely rethinking the structure 🙂

    #19493
    Reply to: header margins, responsive margins ..

    Koen
    Participant

    Goodmorning Luxembourg,

    I’m working on your trick. It does look good on mobile, but from 800 pixels wide on it starts to behave weird. As from the third lady I am losing grip. Maybe I am missing a </div> or a <div class=”two-thirds”> somewhere?
    Please see this page (not in the menu, just a try-out):
    https://verloskundigeinamsterdam.nl/829-2/

    Hope to hear from you,
    thanks, Koen

    #19495
    Reply to: header margins, responsive margins ..

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Erm, this was indeed unexpected! I think this will be all set if you add a br tag with the clear class before each new “line” (that, is before each one-third column), like so:

    <br class="clear" />
    <div class="one-third alignright">
    [etc.]

    Sorry about the fiddling, as I said this was a little bit “hacky” 😉

    #19501
    Reply to: header margins, responsive margins ..

    Koen
    Participant

    OK, this works. A bit strange though: when i did this on a ‘sketch’ page it worked out fine.
    So I copied all the code to the ‘live’ page. There, the same problem occurred as before: from the third girl on, the picture did no longer aligne to the right.
    So I took a deep breath, entered another <br class=”clear” /> and finally things worked out.
    End good, all good (as we say i the Netherlands).

    Thanks!
    Koen

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘header margins, responsive margins ..’ is closed to new replies.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe
SiteLock