WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Twenty Eleven] Having multiple elements in header: improve positions? (3 posts)

  1. artisana
    Member
    Posted 10 months ago #

    Hey there!
    I'm working on this site and I would love for the top of the header image to be in alignment wit the top of the social/contact elements on the right.
    Esssentially, is there a way to position the header image so that it is not *below* the right-floating elements above it in header.php? A way to align them differently?

    I hope so!

    Let me know if you know how I can accomplish this. My limited knowledge has only taken me so far...

    Thanks so much!

    -Ana

  2. paulwpxp
    Font hero
    Posted 10 months ago #

    For responsive design, it's better to not use image that has text in it. Because image scales responsively, and the text won't be readable at certain screen width.

    Under the current markups and CSS, this fix would do the job. It absolute positions the topinfo div in bigscreen and let it float in smaller screen.

    Take this out

    .topinfo {
    	clear: both;
    	margin: 0px 88px 0px 0px;
    }

    Make another logo image for small screen, and put this code below in, replace the image path with your small logo.

    /*-----full size bg image-----*/
    html body.custom-background {
    	background-repeat: no-repeat;
    	background-size: cover;
    	background-attachment: fixed;
    }
    
    /*----position absolute the .topinfo div in big screen-----*/
    @media screen and (min-width: 1000px) {
    	.topinfo { position: absolute; right: 80px; top:-15px; }
    }
    
    /*-----fix for small logo-----*/
    @media screen and (max-width: 1000px) {
    	#branding > a[href="http://drsandrabeddor.com/"] img { opacity: 0; }
    	#branding > a[href="http://drsandrabeddor.com/"] {
    		background-image: url("http://dummyimage.com/500x75/000000/ff0000.png");
    		background-repeat: no-repeat;
    		background-size: cover;
    		background-position: center;
    		display: block; clear: both; margin-bottom: 20px ;
    	}
    	.call { margin-bottom: 20px; }
    }

    The better way is to have 2 divs with size set in percentage and float in big screen collapsed in small screen like columns in RWD, but considering the current setup the above should just work.

  3. artisana
    Member
    Posted 10 months ago #

    Thank you -- That worked wonders! I appreciate the clear code you provided for me. Cheers!

    I will look more into RWD since that is the optimal route these days!

Reply

You must log in to post.

About this Topic