🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Cannot right align child div within container div

Home Forums Support Cannot right align child div within container div

  • This topic has 7 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1152807
    Michael

    Hi all,

    Please can someone tell me what I am missing here. I have a header widget container div containing 2 child divs and I am trying to align the second div to the right of the container. However it refuses to shift. I have tried everything I can think of but no luck. I have outlined the divs to make it easier to see what I am talking about:

    https://reclaimdesign-383226.easywp.com/faq/

    Here’s my CSS:

    #header-content {
    	border: 1px solid #9FF;
    	margin: 0;
    	padding: 0;
    	max-width: 100%;
    }
    
    .wp-block-columns {
    	margin: 0;	
    	padding: 0;
    }
    
    .wp-block-column {
    	margin: 0;
    	padding: 0;	
    }
    
    .likelinks {
    	border: 1px solid #F0F;
    	height: 100%;
    	margin: 0;
    	padding: 0 0 0 5px;
    }
    
    #openbtn-container {
    	border: 1px solid #930;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	text-align: right;
    	vertical-align: middle;
    }

    Michael.

    #1152826
    Michael

    Never mind, I deleted the divs for wp columns and wp column in the code snippet, then made the header container a flex box and justified the child divs with space between, and that has shifted it to the right finally!

    For anyone else who might benefit:

    add_action( 'generate_inside_site_container','mm_insert_social_media_inside_container' );  
    function mm_insert_social_media_inside_container() { ?> 
    
    	<div id="header-content">
    		<div class="likelinks"><a href="https://www.facebook.com/reclaimdesignza" class="fa" rel="noopener noreferrer" target="_blank" title="Like Us On Facebook"><span class="icon-facebook"></span></a> <a href="https://twitter.com/ReclaimDesignZA" class="fa" rel="noopener noreferrer" target="_blank" title="Follow Us On Twitter"><span class="icon-twitter"></span></a> <a href="https://www.instagram.com/reclaimdesign/" class="fa" rel="noopener noreferrer" target="_blank" title="Follow Us On Instagram"><span class="icon-instagram"></span></a> <a href="https://za.pinterest.com/reclaimdesignza/" class="fa" rel="noopener noreferrer" target="_blank" title="Follow Us On Pinterest"><span class="icon-pinterest"></span></a></div>
    		<div id="openbtn-container"> <span class="openbtn">+</span></div>
        </div>
    
    <?php }

    CSS:

    #header-content {
    	display: flex;
    	justify-content: space-between;
    	margin: 0;
    	padding: 0;
    	max-width: 100%;
    }
    
    .likelinks {
    	border: 1px solid #F0F;
    	height: 100%;
    	margin: 0;
    	padding: 0 0 0 5px;
    }
    
    #openbtn-container {
    	border: 1px solid #930;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	text-align: right;
    	vertical-align: middle;
    }
    #1152830
    David
    Staff
    Customer Support

    Hi there,

    the openbtn-container element is right aligned when viewed on larger screens.
    The issue i see is with this CSS:

    #page.hfeed.site.grid-container.container.grid-parent {
        /* border: 1px solid #ff0000; */
        margin: 0 auto;
        padding: 0;
        width: 960px;
    }

    On smaller screens you’re forcing the container to be 960px wide forcing the right hand content to be off the edge of the view port.

    #1153044
    Michael

    Hi David,

    Thanks for looking into it for me. I’ve also set that to be 100% for mobile. For some reason it’s the only way I could get it to work:

    @media only screen and (max-width: 768px) {
    
    #page.hfeed.site.grid-container.container.grid-parent {
    	width: 100%;
    }
    
    }
    #1153066
    David
    Staff
    Customer Support

    I am not sure why you have this CSS:

    #page.hfeed.site.grid-container.container.grid-parent {
        /* border: 1px solid #ff0000; */
        margin: 0 auto;
        padding: 0;
        width: 960px;
    }

    If i disable it in the Developers Tools i cannot see any styling changes.
    But its forcing you to add the mobile CSS to correct the width issue ….

    #1153181
    Michael

    I was having great trouble seeing the wood for the trees the other day, so it’s quite possible that the code is redundant (I was trying all sorts to get the images to scale down to mobile)…. I’ll remove it now and see what happens!

    #1153183
    Michael

    Hi David, everything is still present and correct on laptop and mobile, so you’re right it’s not necessary. Thank you for your help!

    #1153207
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.