As someone with no coding experience, I've been working on my portfolio using Cargo. Currently, I'm trying to adjust the mobile view of an article on my homepage through media queries. However, the code is unintentionally changing the layout on desktop as well. Below are reference pictures of the desired mobile and desktop views, along with the current code I'm dealing with. Any assistance would be greatly appreciated, thank you!
**(disregard the borders in the code, this was mostly for visibility purposes when making changes)
Here's my code:
<style>
.tiffany {
/*border: solid green 3px;*/
width: 100%;
height: 100%;
}
.tiffany img {
width: 100%;
height: 100%;
position: relative;
}
.tiffany .textbox {
/*border: solid red 3px;*/
position: absolute;
margin: 32px;
font-weight: bold;
text-align: left;
}
.resize_tiffany {
font-size: 5vw;
}
.tiffany .gradient {
/*border: solid red 3px;*/
left: 0px;
top: 0px;
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
/* other styles (left, top, right, and padding) */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
}
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 50px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 16px;
font-size: 16px;
border: none;
font color: rgb(255, 255, 255)
}
@media only screen and (max-width: 480) {
.tiffany .textbox {
border: solid blue 3px;
position: absolute;
margin: 15px;
font-weight: bold;
text-align: left;
}
@media only screen and (max-width: 480) {
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 10px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 8px;
font-size: 16px;
border: none;
font color: rgb(255, 255, 255)
}
}
</style>
<div class="tiffany">
<img class="background-image" src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg">
<div class="gradient">
<div="" class="textbox full-pointer-events-none">
<h1> <span class="resize_tiffany">Tiffany Alfonseca Pays Homage in Painting</span></h1>
<br>
</div>
<div="" class="read-here">
<bodycopy> <b><a href="https://latina.com/tiffany-alfonseca-pays-homage-in-painting/" target="_blank">Read here</a></b> </bodycopy>
</div>
</div>
<br></div>