locked
on page resizing the button overlaps the image RRS feed

  • Question

  • User-1474096950 posted
    <div class="container">
            <div id="red" class="span6" style="width:40%;float:left;margin-right:5%;">
                <div>
                    <h4 class="text-center">
                        <img src="~/images/main.jpg " height="600px" style=" border: 2px solid black; padding:0px;"
                             alt="main" width="440px" />
    
                        </h4>
                    </div>
            </div>
            <div id="blue" class="span6 " style="width:50%;float:left;">
                
                    <a href="@Url.Action("Index", "Details",new {  FirstName = "Test", LastName = "Test"} )">
                   &nbsp;   &nbsp;    <button id="details" onclick="location.href=parentNode.href" style="background-color:blue ;  box-shadow: 0 8px 16px 0 rgba(4,0,3,0.2), 0 6px 20px 0 rgba(2,4,2,2.19);width: 100%;  "  class="button button4 ">
                            Welcome to the test
                            <br />test1
                            <br />or test2
                            <h3 class="btn-info ">
                                <span class="xlarge-text bold">
                                    Choose Your <span style="text-decoration: underline;">Test</span>
                                    </span>
                            </h3>
                               
                        
                            Receive Info
                            <br />Services
                            <br />Thankyou
                        </button>
                    </a>
    
    </div>

    referring https://www.w3schools.com/css/css3_buttons.asp

    on reszing the page the button control overlaps image control all other controls on page gets aligned one below another only issue with this 2
    how to prevent overlapping

    Tuesday, July 31, 2018 12:04 PM

All replies

  • User1724605321 posted

    Hi svibuk ,

    You can use flexbox :

     #wrapper {
                display: flex; /* Magic begins */
                flex-wrap: wrap; /* Allow multiple lines */
            }
    
                #wrapper > div {
                    flex: 1; /* Distribute space equally among the flex items */
                    min-width: 500px; /* But force them to be at least300px wide */
                   
                }
    <div class="container" id="wrapper">
            <div id="red" class="span6" style="width:40%;margin-right:5%;">
                <div>
                    <h4 class="text-center">
                        <img src="~/images/main.jpg " height="600px" style=" border: 2px solid black; padding:0px;"
                             alt="main" width="440px" />
    
                        </h4>
                    </div>
            </div>
            <div id="blue" class="span6 " style="width:50%;">
                
                    <a href="@Url.Action("Index", "Details",new {  FirstName = "Test", LastName = "Test"} )">
                   &nbsp;   &nbsp;    <button id="details" onclick="location.href=parentNode.href" style="background-color:blue ;  box-shadow: 0 8px 16px 0 rgba(4,0,3,0.2), 0 6px 20px 0 rgba(2,4,2,2.19);width: 100%;  "  class="button button4 ">
                            Welcome to the test
                            <br />test1
                            <br />or test2
                            <h3 class="btn-info ">
                                <span class="xlarge-text bold">
                                    Choose Your <span style="text-decoration: underline;">Test</span>
                                    </span>
                            </h3>
                               
                        
                            Receive Info
                            <br />Services
                            <br />Thankyou
                        </button>
                    </a>
    
    </div>
    

    You can modify the "min-width" to fit your requirement . 

    Or you can use  media queries in responsive web pages :

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp 

    Best Regards,

    Nan Yu

    Wednesday, August 1, 2018 8:55 AM