My goal is to make my website responsive on all mobile devices. I want the mobile version to look exactly like the desktop version, just smaller in size. I attempted using transform but it didn't have the desired effect.
I aim to achieve the same consistency in content display as seen on bs.to, where the appearance remains consistent across both desktop and mobile platforms.
Let's start by focusing on the search bar.
HTML Code
.outercontainer {
width: 1200px;
height: auto;
margin: 0 auto;
border-width: 1px;
border-style: solid;
}
/*Navigation Structure*/
.grid-container {
display: grid;
grid-template-rows: 45px;
grid-template-columns: auto auto auto auto auto auto;
background-color: black;
}
.grid-container a {
text-decoration: none;
color: white;
}
.grid-container>div {
text-align: center;
color: whitesmoke;
font-size: 18px;
align-self: center;
}
/*Searchbar*/
.grid-item3 {
grid-column-start: 3;
grid-column-end: 5;
}<div class="outercontainer">
<div class="grid-container">
<div class="grid-item1"> <strong style="font-size: 25px;">Deutschland</strong></div>
<div class="grid-item2">
Kategorie:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="grid-item3"> <input type="text" placeholder="Suche deine Events..." style="width: 100%;font-size:17px;"></div>
<div class="grid-item4"> <a href="#">Anmelden </a></div>
<div class="grid-item5"> <a href="#"> Registrieren</a></div>
</div>
</div>I experimented with setting the width to 100% while having a max-width of 1200px, but I still need code to adjust the size of elements within the search bar. My main objective is to have these elements adapt to the screen size, creating a mini version of the desktop layout.