I am in the process of constructing a website and I came across this page that has a feature similar to what I want to achieve: https://i.sstatic.net/E9k74.png
To understand how they built that feature, I examined the .css and HTML code from their webpage.
Here is my attempt:
https://i.sstatic.net/VgE1T.png
The problem arises when I try to view the site on a mobile phone - I struggle with hiding my image. Even if I use "hidden-xs" in the image div, the text alignment gets disrupted.
On the left side you can see what I am aiming for, and on the right side is my current result: https://i.sstatic.net/CW9Kn.png
HTML
<div class="white_bg">
<div id="mobile-app-sections" class="container">
<div class="container-medium">
<div class="row">
<div class="col-xs-5 into-row border app-image-wrap">
<img class="app-phone" src="img/device.jpg">
</div> <!--col-->
<div class="col-xs-7 into-row border">
<h2>foodpress in your mobile! </h2>
<h3 class="green-text">Get our app, it's the fastest way to order food on the go.</h3>
<div class="row border" id="getapp-wrap">
<div class="col-xs-4 border">
<a href="http://" target="_blank">
<img class="get-app" src="img/get-app-store.png">
</a>
</div>
<div class="col-xs-4 border">
<a href="http://" target="_blank">
<img class="get-app" src="img/get-google-play.png">
</a>
</div>
</div> <!--row-->
</div> <!--col-->
</div> <!--row-->
</div> <!--container-medium-->
<div class="mytable border" id="getapp-wrap2">
<div class="mycol border">
<a href="http://" target="_blank">
<img class="get-app" src="img/get-app-store.png">
</a>
</div> <!--col-->
<div class="mycol border">
<a href="http://" target="_blank">
<img class="get-app" src="img/get-google-play.png">
</a>
</div> <!--col-->
</div> <!--mytable-->
</div> <!--container-->
</div><!-- End white_bg -->
CSS
/* CUSTOM CSS */
img{
max-width:100%;
height:auto;
}
.border{
border:0px solid red;
}
.mytable{
display:table;
width:100%;
}
.mytable .mycol{
display:table-cell;
}
#mobile-app-sections{
padding-top:30px;
}
.container-medium {
max-width:800px;
margin:auto;
}
#mobile-app-sections h2{
margin-top:22%;
}
#mobile-app-sections h3{
margin:auto auto 25px;
}
#getapp-wrap2{
margin:auto;
width:300px;
}
#getapp-wrap2 img{
max-width:130px;
}
#getapp-wrap2 .mycol{
width:150px;
}
#getapp-wrap2{
display:none;
}
I borrowed the HTML and CSS snippets from this site in an attempt to troubleshoot my issues.
What Could Be Going Wrong?
Additionally, the image I am trying to hide has the class name "app-phone," which I cannot locate in the source code (possibly the root of the issue?).
Thank you for your assistance!