Image Flush With Home Section – Small Screens

Support Area Forums Elite Image Flush With Home Section – Small Screens

Viewing 10 posts - 1 through 10 (of 10 total)
URL to the page in question: http://beepou.com
  • Author
    Posts
  • #32422
    Alberto Brusa
    Participant

    Hi Bill, hope everything going all right!

    A couple of weeks ago you provided a clean solution to have an image flush with home section.
    I discovered that on small screens (iPhone) there seems to be a gap, which is not present on bigger ones.

    Could you provide help on the matter?
    Best regards,
    Alberto

    #32424
    Bill Robbins
    Moderator

    Hi Alberto,

    I took a look and I think that may be the border that’s added to the fourth home section. Here’s the spot in the child theme’s style.css:

    
    #home-four {
        border-top: 8px solid #ffffff;
        /*border-bottom: 1px solid #7d7cfa;*/
    
    }
    

    You could always wrap that in a media query so that it is only there on larger screen sizes. That could look something like this:

    
    @media only screen and (min-width: 780px) {
        
        #home-four {
            border-top: 8px solid #ffffff;
            /*border-bottom: 1px solid #7d7cfa;*/
        
        }
        
    }
    

    That way the border is only present on screens 780px (or whatever size you’d like) and larger.

    Have a great day,
    Bill

    #32426
    Alberto Brusa
    Participant
    This reply has been marked as private.
    #32428
    Bill Robbins
    Moderator

    Looks like it did the trick to me.

    #32430
    Alberto Brusa
    Participant
    This reply has been marked as private.
    #32431
    Bill Robbins
    Moderator

    It makes the black flush against the colored stripes. No gap.

    #32432
    Alberto Brusa
    Participant
    This reply has been marked as private.
    #32433
    Bill Robbins
    Moderator

    To make the phone flush, you may have to move it down like this:

    
    @media only screen and (max-width: 767px) {
    
    	#home-three .cbp-so-side-right {
    		bottom: -20px;
    		position: relative;
    	}
    
    }
    
    #32456
    Alberto Brusa
    Participant
    This reply has been marked as private.
    #32459
    Bill Robbins
    Moderator

    Glad that did the trick Alberto 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Image Flush With Home Section – Small Screens’ is closed to new replies.