1
Answer

show image properly even in mobile view too

Photo of Mohan Arumugam

Mohan Arumugam
6y
803
1
Here the code of HTML and CSS with bootstrap how to fix the bug to show image properly even in mobile view too
  1. #one{  
  2. padding-top:6.5%;  
  3. opacity:10;  
  4. padding-left:1%;  
  5. padding-right:1.5%;  
  6. padding-bottom:1%;  
  7. background-image:url(https://ak9.picdn.net/shutterstock/videos/4872389/thumb/1.jpg);  
  8. background-size:355px 122px;  
  9. background-repeat: no-repeat;  
  10. margin:2%;  
  11. width:42%;  
  12. text-align: center;  
  13. /*background-color:#d32f2f;*/  
  14. /*background-color:royalblue;*/  
  15. border-color:white;  
  16. color:purple;  
  17. font-size-adjust:initial;  
  18. border-color:#e0e0e0;  
  19. background-origin:border-box;  
  20. }  
  21. #one:hover{  
  22. transform: scale(1.3);  
  23. }  
  24. #two{  
  25. opacity:10;  
  26. padding-top:6.5%;  
  27. padding-left:1%;  
  28. /*color:#000000;*/  
  29. color:purple;  
  30. padding-right:.5%;  
  31. padding-bottom:1%;  
  32. background-image:url(https://www.3mediaweb.com/wp-content/uploads/SEO-for-Local-Search-Think-Like-a-Customer-01-1170x662.jpg);  
  33. background-size:355px 122px;  
  34. background-repeat: no-repeat;  
  35. margin:2%;  
  36. width:42%;  
  37. text-align: center;  
  38. font-size-adjust:initial;  
  39. border-color:#e0e0e0;  
  40. background-origin:border-box;  
  41. }  
  42. #two:hover{  
  43. transform: scale(1.3);  
  44. }  
  45. #three{  
  46. opacity:10;  
  47. padding-top:6.5%;  
  48. padding-left:1.5%;  
  49. padding-right:1.5%;  
  50. color:purple;  
  51. padding-bottom:1%;  
  52. background-image:url(https://4.imimg.com/data4/LI/XC/MY-15020461/we-are-loan-agency-from-looking-for-more-business-associate-500x500.jpg);  
  53. background-size:355px 122px;  
  54. background-repeat: no-repeat;  
  55. margin:2%;  
  56. width:42%;  
  57. border-color:#e0e0e0;  
  58. /*background-color: #ffd600;*/  
  59. }  
  60. #three:hover{  
  61. transform: scale(1.3);  
  62. }  
  63. #four{  
  64. opacity:10;  
  65. margin:2%;  
  66. color:purple;  
  67. width:42%;  
  68. padding-top:6.5%;  
  69. padding-left:1.5%;  
  70. padding-right:1.5%;  
  71. padding-bottom:1%;  
  72. background-image:url(http://www.courseuniv.com/course-images/9.png);  
  73. background-size:355px 122px;  
  74. background-repeat: no-repeat;  
  75. border-color:#e0e0e0;  
  76. /*background-color: #b2ff59;*/  
  77. }  
  78. #four:hover{  
  79. transform: scale(1.3);  
  80. }  
  81. #five{  
  82. margin:2%;  
  83. opacity:10;  
  84. margin-left:28%;  
  85. padding-top:6.5%;  
  86. color:purple;  
  87. padding-left:.5%;  
  88. padding-right:.5%;  
  89. padding-bottom:1%;  
  90. background-image:url(https://www.10wallpaper.com/wallpaper/1366x768/1606/Internet_Business_Technology_HD_Wallpaper_14_1366x768.jpg);  
  91. background-size:355px 122px;  
  92. background-repeat: no-repeat;  
  93. width:42%;  
  94. border-color:#e0e0e0;  
  95. /*background-color:#ffab91;*/  
  96. }  
  97. #five:hover{  
  98. transform: scale(1.3);  
  99. }  
  100. #ones {  
  101. margin-top:70px;  
  102. font-family:Lucida Handwriting;  
  103. font-size:13px;  
  104. font-weight:600;  
  105. }  
  106. #twos {  
  107. margin-top:70px;  
  108. font-family:Lucida Handwriting;  
  109. font-size:13px;  
  110. font-weight:600;  
  111. }  
  112. #threes {  
  113. margin-top:70px;  
  114. font-family:Lucida Handwriting;  
  115. font-size:13px;  
  116. font-weight:600;  
  117. }  
  118. #fours {  
  119. margin-top:70px;  
  120. font-family:Lucida Handwriting;  
  121. font-size:13px;  
  122. font-weight:600;  
  123. }  
  124. #fives {  
  125. margin-top:70px;  
  126. font-family:Lucida Handwriting;  
  127. font-size:13px;  
  128. font-weight:600;  
  129. }  
  1. <form id="form1" runat="server">  
  2. <div class="col-lg-2 col-xs-0"></div>  
  3. <div class="col-lg-9 col-md-4 col-sm-6" >  
  4. <div id="total">  
  5. <a href="CustomerNew.aspx" class="btn btn-lg" role="button" id="one"><div id="ones">New Customer</div></a>  
  6. <a href="CustomeSearchPage.aspx" class="btn btn-lg" role="button" id="two"><div id="twos">Search Customer</div></a>  
  7. <a href="CustomeSearchPage.aspx" class="btn btn-lg" role="button" id="three"><div id="threes">New Loan</div></a>  
  8. <a href="Report1.aspx" class="btn btn-lg" role="button" id="four"><div id="fours">Reports</div></a>  
  9. <a href="#" class="btn btn-lg" role="button" id="five"><div id="fives">Admin</div></a>  
  10. </div>  
  11. </div>  
  12. <div class="col-lg-1" id="thi"></div>  
  13. </form>  
In mobile view, its showing hawked
 
In desktop view its view good

Answers (1)

Next Recommended Forum