How to separate two elements that are stuck on each other only on mobile devices?-CodePudding

Here's how it looks on desktops and laptops

I'm no expert but I've been tasked with doing this, this is based on a template that I found,there is some javascript included but I really don't know where to look when it comes to javascript. I just want them to look separated, preferably one above the other,how can I do that through css and html?

CSS and HTML

  a.main-filled-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #000dff;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;

}

a.main-filled-button:hover {
  color: #fff;
  background-color: #000dff;
}

<div >
            <div >
                <img src="assets/images/slide-02.jpg" alt="">
                <div >
                  <h3>WELCOME TO AKSM</h3>
                  <h5>Leading surveying company</h5>
                  <a href="https://www.aksm.gr/wp-content/uploads/2020/03/ΜME_WEBENa-1.pdf" >EPAnEK 2014-2020</a>
                  <a href="https://www.aksm.gr/wp-content/uploads/2021/06/aksm-prodiagrafes-popup.jpg" >ΠΡΟΔΙΑΓΡΑΦΕΣ</a>
                </div>
            </div>
          </div>

CodePudding user response：

Add margin

 a.main-filled-button {
   margin: 10px 0;
 }

CodePudding user response：

Add a media query for mobile devices in the css file

@media (max-width: 640px) {
  .main-filled-button {
    margin-top: 20px;
  }
}

CodePudding user response：

I'd be inclined to use css flex-box layout, one approach is as below with explanatory comments in the code:

/* simple CSS reset to have the browser use the same sizing calculations
   for all elements across all browsers, removing default margin and
   padding: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* to add visibility, a page background of white is poor contrast
   against a white background for the <a> elements (adjust to taste): */
body {
  background-color: lightblue;
}

/* using flex-box layout: */
div.text-content {
  border: 1px solid #000;
  display: flex;
  /* shorthand, setting:
      flex-direction: row;
      flex-wrap: wrap; */
  flex-flow: row wrap;
  /* specifying a 1em gap between adjacent elements: */
  gap: 1em;
  margin: 1em;
  padding: 1em;
  /* setting the content vertically and horizontally centered,
     shorthand for:
       justify-content: center;
       align-content: center; */
  place-content: center;
}

h3,
h5 {
  /* forcing the <h3> and <h5> elements to take 100% of
     their parent element's width: */
  flex-basis: 100%;
  /* setting the text-alignment to center: */
  text-align: center;
}

/* no changes below: */
a.main-filled-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #000dff;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 20px;
  transition: all 0.3s ease 0s;

}

a.main-filled-button:hover {
  color: #fff;
  background-color: #000dff;
}

<div >
  <div >
    <img src="assets/images/slide-02.jpg" alt="">
    <div >
      <h3>WELCOME TO AKSM</h3>
      <h5>Leading surveying company</h5>
      <a href="https://www.aksm.gr/wp-content/uploads/2020/03/ΜME_WEBENa-1.pdf" >EPAnEK 2014-2020</a>
      <a href="https://www.aksm.gr/wp-content/uploads/2021/06/aksm-prodiagrafes-popup.jpg" >ΠΡΟΔΙΑΓΡΑΦΕΣ</a>
    </div>
  </div>
</div>

JS Fiddle demo.

References:

Bibliography: