top of logo is cut off on mobile & gallery is not responsive

Support Area Forums Agency top of logo is cut off on mobile & gallery is not responsive

This topic contains 2 replies, has 2 voices, and was last updated by R. whitehouse R. whitehouse 2 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://battagliahomes.com/
  • Author
    Posts
  • #25973
    R. whitehouse
    R. whitehouse
    Participant

    Hello, I tried using the below code to fix the logo getting cut off and it works for mobile but is wrong for viewing on a computer. Do you know how I can make this change only affect the top margin on mobile?

    #logo {
    margin-top: 20px;
    }

    Also, on the internal gallery pages (example:http://battagliahomes.com/4-n-bruner-hinsdale-il-2/) the gallery is not resizing to be responsive. Do you now how this can be fixed? Thank you so much for your help.

    #25979

    Bill Robbins
    Keymaster

    You can use what’s called a media query. You could tell the browser that it should only use the styles included in the query when the width of the browser is less than 768 pixels as an example. Here’s one way to do that:

    
    @media only screen and (max-width: 767px) {
    	
    	#logo {
    		position: static;
    	}
    	
    	#logo p {
    		margin-bottom: 0;
    	}
    	
    	select.tinynav {
    		margin-top: 0;
    	}
    
    }
    
    #content #vlightbox20 {
    	width:100%;	
    }
    

    The last style there, the one outside the media query, sets that photo gallery’s width to be 100% instead of set in pixels.

    Take care,
    Bill

    #25984
    R. whitehouse
    R. whitehouse
    Participant

    ah ha!!! It worked perfectly. Did not think of the 100% for the gallery thumbnails. Thank you so so much!!

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

The topic ‘top of logo is cut off on mobile & gallery is not responsive’ is closed to new replies.