Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Problem with stacking/repsonisve divs

Hello, hopefully someone can help me with this issue and I thank everyone in advance fo reading this.
I have a website where the header has two sections that contain images (one on left and several small ones on the right linking to various social media pages). When viewing on a phone currently the left image resizes, but the images in the right do not. (see attached image, circled in green)

But the main problem is that I would like the images (social media buttons) in the right div to move as a block under the image on the left when viewing on a phone, but currently they do not.
I have tried many revisions, adding extra div areas to contain these images (rather than the table in the current HTML, seen in link below) but I cannot center them and they overlap each other, align weirdly.

I also have other div areas that act properly (stack when viewing on phone), but unsure if that coding is interfering in the header coding I am trying to figure out.


Any help is very much appreciated!

Sean
 

Attachments

  • Screen-Shot-2023-01-21-at-1.09.45-PM.jpg
    Screen-Shot-2023-01-21-at-1.09.45-PM.jpg
    40.3 KB · Views: 1
I hope I'm posting this correctly. I am not sure what to include here in my commebt as the instructions say don't post a "wall of code".

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test10</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;


}

body {
  font-family: Arial, Helvetica, sans-serif;
background-color: #000000;

padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;

}

.header {
  background-color: #000000;
  padding: 10px;
  text-align: center;
  font-size: 0px;
}



/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 430px;

}

.left {
  width: 12%;
background-image: url('https://www.londonaftermidnight.com/images/2023/seemlessbg3.jpg');
background-size: contain;
border: 1px solid #424242;
border-radius: 25px;
 
overflow: auto;

}

.middle {
  width: 60%;
overflow: auto;
border: 1px solid #727272;
border-radius: 25px;

}

.right {
  width: 28%;
background-image: url('https://www.londonaftermidnight.com/images/2023/columnBGr.jpg');
background-size: contain;
    background-repeat: no-repeat;
border: 1px solid #424242;
border-radius: 25px;
 
overflow: auto;

}


.rightone {
  width: 242px;
height: 120px;
border: 1px solid #33f6ff;
border-radius: 25px;
background-image: url('https://www.londonaftermidnight.com/images/2023/IND_website-spreadshop-image.jpg');
background-size: absolute;
    background-repeat: no-repeat;
}

.righttwo {
  width: 242px;
height: 120px;
border: 1px solid #33f6ff;
border-radius: 25px;
background-image: url('https://www.londonaftermidnight.com/images/NEWitunessidebarSMALL.png');
background-size: absolute;
    background-repeat: no-repeat;
}


.rightthree {
  width: 242px;
height: 120px;
border: 1px solid #33f6ff;
border-radius: 25px;
background-image: url('https://www.londonaftermidnight.com/images/instagram_widget_image.gif');
background-size: absolute;
    background-repeat: no-repeat;
}



/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



.footer {
  background-color: #000000;
  padding: 10px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .left, .middle, .right{
    width: 100%;

  }


.responsive {
  max-width: 100%;
  height: auto;
}



}


a, a:link, a:visited {
font-size: 9pt;
color: #33f6ff;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
a:hover {
font-size: 9pt;
color: #A8A8A8;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
a:active {
font-size: 9pt;
color: #ffffff;

text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
span.smallgreyfont
{font-size: 8pt;
color: #888888;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
span.mainfontitalic
{font-size: 9pt;
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.borderfont
{font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #382d2c;
 
}

span.mainfont
{font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}

span.ufont
{font-size: 9pt;
font-weight: bold;
text-decoration: Underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.smallfont
{font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.boldmainfont
{font-size: 9pt;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.largeboldmainfont
{font-size: 10pt;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}

span.ulargeboldmainfont
{font-size: 10pt;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
color: #888888;
 text-decoration: Underline;

}

span.boldgreysmallfont
{font-size: 8pt;
     font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #888888;
 
}

 
span.boldsmallfont
{font-size: 8pt;
     font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.redmainfont
{font-size: 9pt;
     color: #ff0000; font-weight : bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

span.boldredmainfont
{font-size: 9pt;
font-weight: bold;
     color: Red; font-weight : bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

 
span.boldsmallredfont
{font-size: 8pt;
color: #FF0000;
     font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
 table, th, td {
  border:0px 000000;

}

[snip]

<div class="header">


<center>

<table>
<tr>
    <th> <IMG SRC="https://www.londonaftermidnight.com/images/2023/IND_SMALL-2015_new_site_banner.jpg" ALT="London After Midnight" WIDTH="541" HEIGHT="120" border="0" class="responsive"></th>


    <th><a href="https://lamofficial.bandcamp.com" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_bandcamp.png" alt="Bandcamp" width="43" height="40" border="0" class="responsive"></a>

<a href="https://instagram.com/lamofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_instagram.png" alt="instagram" width="43" height="40" border="0" class="responsive"></a>

<a href="https://twitter.com/LAMofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_twitter.png" alt="Twitter" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.youtube.com/LAMtv" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_youtube.png" alt="YouTube" width="43" height="40" border="0" class="responsive"></a>

<a href="https://open.spotify.com/artist/51mEqzVhG2n9nD2kBAnWer?si=V9zjtLOURD-emDZBts3pnA" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_spotify.png" alt="spotify" width="43" height="40" border="0" class="responsive"></a>

<BR>

<a href="https://www.facebook.com/LAMofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook1.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/sean.brennan" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook_sean.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/SeanBrennanOfficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook2.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/groups/2329264843/" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook3.png" alt="Facebook" width="43" height="40"
border="0" class="responsive"></a>



<a href="https://www.londonaftermidnight.com/mail.html"><img src="https://www.londonaftermidnight.com/images/icons/icon_mail.png" alt="Mailing List" width="43" height="40" border="0" class="responsive"></a>


</th>
  </tr>
  </table>

</center>

<P>
<BR>

<img src="https://www.londonaftermidnight.com/images/index_news_bar1.png" ALT="London After Midnight News" class="responsive">
<BR>

</div>



<div class="row">
 
<div class="column left" style="background-color:#000000; padding-left: 15px;">

<span class="mainfont">
<li type="square">Latest News
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/catalog.html">LAM Store</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/music.html">Preview Music</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/tour.html">Tour Dates</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/mail.html">Mailing List</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/interviews.html">Interviews</a>
<BR>
 
<li type="square"><A HREF="https://www.londonaftermidnight.com/history.html">Biography</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/links.html">Social Media</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/photo.html">Photos</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/lyrics.html">Lyrics</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/construct.html">LAM F.A.Q.</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/presskit.html">Press Kit</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/contact.html">Contact</a>
</SPAN>
<p>
<BR>

<A HREF="http://darkriderecords.com" TARGET="NEW">
<IMG SRC="https://www.londonaftermidnight.com/images/2023/darkride_leftmenu.png" ALT="Darkride Records" WIDTH=100 HEIGHT=105 ALIGN=center border=0 class="responsive"></a>



</div>



<div class="column middle" style="background-color:#000000;">

<CENTER>
<span class="boldgreysmallfont">SCROLL FOR MORE:</span>
</center>
<P>
 
Maybe it's easier to see what I am trying to do in this comment. This sort of works on the W3schools website tester, but I need these to be centered on the top of my page - but that is something I cannot make occur here.



HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.columnone {
  float: left;

}

.ldiv {
  width: 75%;
}

.rdiv {
  width: 25%;

}

/* Clear floats after the columns */
.rowone:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnone {
    width: 100%;

  }

.responsive {
  max-width: 100%;
  height: auto;
}

}
</style>
</head>
<body>



<div class="rowone">
  <div class="columnone" style="background-color:#000000;">

   <IMG SRC="https://www.londonaftermidnight.com/images/2023/IND_SMALL-2015_new_site_banner.jpg" ALT="London After Midnight" WIDTH="541" HEIGHT="120" border="0" class="responsive">
  </div>


  <div class="columnone" style="background-color:#000000;">

  <a href="https://lamofficial.bandcamp.com" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_bandcamp.png" alt="Bandcamp" width="43" height="40" border="0" class="responsive"></a>

<a href="https://instagram.com/lamofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_instagram.png" alt="instagram" width="43" height="40" border="0" class="responsive"></a>

<a href="https://twitter.com/LAMofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_twitter.png" alt="Twitter" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.youtube.com/LAMtv" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_youtube.png" alt="YouTube" width="43" height="40" border="0" class="responsive"></a>

<a href="https://open.spotify.com/artist/51mEqzVhG2n9nD2kBAnWer?si=V9zjtLOURD-emDZBts3pnA" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_spotify.png" alt="spotify" width="43" height="40" border="0" class="responsive"></a>

<BR>

<a href="https://www.facebook.com/LAMofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook1.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/sean.brennan" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook_sean.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/SeanBrennanOfficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook2.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/groups/2329264843/" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook3.png" alt="Facebook" width="43" height="40"
border="0" class="responsive"></a>

<a href="https://www.londonaftermidnight.com/mail.html"><img src="https://www.londonaftermidnight.com/images/icons/icon_mail.png" alt="Mailing List" width="43" height="40" border="0" class="responsive"></a>


  </div>
</div>

</body>
</html>
 
Last edited by a moderator:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom