Off-Topic ⇒ Make page responsive

[SpIdErPiGgY]

I hope someone can help me here, I scraped this code from phpbb nl

It needs a cleanup, gonna do that myself

But how do I make this responsibe for mobile devices?
I tried myself, but can't get it ti work...

Code: Select all

<div class="left"> <h2>Download phpBB 3.3</h2>
 <div class="download color_6"> <h2>Volledig pakket</h2> <div> <a href="/forums/downloads/107/phpBB-NL-3.3.11.zip">phpBB 3.3.11 Nederlands</a> <br> <small class="small_left">Vrijgegeven op 22 okt 2023, 00:00</small> <small class="small_right">&nbsp;</small> </div> </div> 
 <p class="download_small">Gebruik dit pakket voor een nieuwe installatie. <br> <br> </p> <div class="news"> <h2>Vorige versies</h2> <p class="always_current">Installeer altijd de laatste versie. Mocht je toch op zoek zijn naar oudere versies, dan kan je deze hieronder downloaden</p> <ul style="display: block" id="download"> <li><a href="/forums/downloads/104/phpBB-NL-3.3.10.zip">phpBB 3.3.10 Nederlands</a></li> <li><a href="/forums/downloads/101/phpBB-NL-3.3.9.zip">phpBB 3.3.9 Nederlands</a></li> <li><a href="/forums/downloads/98/phpBB-NL-3.3.8.zip">phpBB 3.3.8 Nederlands</a></li> <li><a href="/forums/downloads/95/phpBB-NL-3.3.7.zip">phpBB 3.3.7</a></li> <li><a href="/forums/downloads/92/phpBB-3.3.5.zip">phpBB 3.3.5 Nederlands</a></li> <li><a href="/forums/downloads/86/phpBB-NL-3.3.4.zip">phpBB 3.3.4 Nederlands</a></li> <li><a href="/forums/downloads/83/phpBB-NL-3.3.3.zip">phpBB 3.3.3 Nederlands</a></li> <li><a href="/forums/downloads/80/phpBB-NL-3.3.2.zip">phpBB 3.3.2 Nederlands</a></li> <li><a href="/forums/downloads/74/phpBB-NL-3.3.1.zip">phpBB 3.3.1 Nederlands</a></li> <li><a href="/forums/downloads/68/phpBB-NL-3.3.0.zip">phpBB 3.3.0 Nederlands</a></li> </ul> </div> <div class="news"> <h2>Nederlandse vertaling</h2> <ul> <li><a href="/forums/downloads/109/dutch_casual_honorifics_2_3_11.zip">Nederlands taalpakket voor 3.3.11</a></li> <li><a href="/forums/downloads/106/dutch_casual_honorifics_2_3_10.zip">Nederlands taalpakket voor 3.3.10</a></li> <li><a href="/forums/downloads/103/dutch_casual_honorifics_2_3_9.zip">Nederlands taalpakket voor 3.3.9</a></li> <li><a href="/forums/downloads/100/dutch_casual_honorifics_2_3_8.zip">Nederlands taalpakket voor 3.3.8</a></li> <li><a href="/forums/downloads/97/dutch_casual_honorifics_2_3_7.zip">Nederlands taalpakket voor 3.3.7</a></li> <li><a href="/forums/downloads/94/dutch_casual_honorifics_2_3_5.zip">Nederlands taalpakket voor 3.3.5</a></li> <li><a href="/forums/downloads/88/dutch_casual_honorifics_2_3_4.zip">Nederlands taalpakket voor 3.3.4</a></li> <li><a href="/forums/downloads/85/dutch_casual_honorifics_2_3_3.zip">Nederlands taalpakket voor 3.3.3</a></li> <li><a href="/forums/downloads/82/dutch_casual_honorifics_2_3_2.zip">Nederlands taalpakket voor 3.3.2</a></li> <li><a href="/forums/downloads/76/dutch_casual_honorifics_2_3_1.zip">Nederlands taalpakket voor 3.3.1</a></li> <li><a href="/forums/downloads/70/dutch_casual_honorifics_2_3_0.zip">Nederlands taalpakket voor 3.3.0</a></li> </ul> </div> </div> <div class="middle"> <h2>Update phpBB 3.3</h2> <div class="download color_5"> <h2>Geavanceerde updater</h2> <div> <a href="/forums/downloads/108/phpBB-NL-3.3.10_to_3.3.11.zip">phpBB 3.3.10 naar phpBB 3.3.11</a> <br> <small class="small_left">Vrijgegeven op 22 okt 2023, 00:00</small> <small class="small_right">&nbsp;</small> </div> </div> <p class="download_small"> <br> <br> </p> <div class="news"> <h2>Vorige versies</h2> <p class="always_current">Installeer altijd de laatste versie. Mocht je toch op zoek zijn naar oudere versies, dan kan je deze hieronder downloaden</p> <ul> <li><a href="/forums/downloads/105/phpBB-NL-3.3.9_to_3.3.10.zip">phpBB 3.3.9 naar phpBB 3.3.10</a></li> <li><a href="/forums/downloads/102/phpBB-NL-3.3.8_to_3.3.9.zip">phpBB 3.3.8naar phpBB 3.3.9</a></li> <li><a href="/forums/downloads/99/phpBB-NL-3.3.7_to_3.3.8.zip">phpBB 3.3.7 naar phpBB 3.3.8</a></li> <li><a href="/forums/downloads/96/phpBB-NL-3.3.5_to_3.3.7.zip">phpBB 3.3.5 naar phpBB 3.3.7</a></li> <li><a href="/forums/downloads/93/phpBB-NL-3.3.4_to_3.3.5.zip">phpBB 3.3.4 naar phpBB 3.3.5</a></li> <li><a href="/forums/downloads/87/phpBB-3.3.3_to_3.3.4.zip">phpBB 3.3.3 naar phpBB 3.3.4</a></li> <li><a href="/forums/downloads/84/phpBB-NL-3.3.2_to_3.3.3.zip">phpBB 3.3.2 naar phpBB 3.3.3</a></li> <li><a href="/forums/downloads/81/phpBB-NL-3.3.1_to_3.3.2.zip">phpBB 3.3.1 naar phpBB 3.3.2</a></li> <li><a href="/forums/downloads/75/phpBB-NL-3.3.0_to_3.3.1.zip">phpBB 3.3.0 naar phpBB 3.3.1</a></li> <li><a href="/forums/downloads/69/phpBB-NL-3.2.9_to_3.3.0.zip">phpBB 3.2.9 naar phpBB 3.3.0</a></li> </ul> </div> </div> <div style="clear: both"></div> 

<style>




.download {
    color: #FFF;
    padding: 1em 0 0 1em;
    background-repeat: no-repeat;
    height: 80px;
    width: 300px;
}

.download h2 {
    font-size:1.1em !important;
    color: #FFF;
    margin: 0 0 .5em 0;
    font-weight: bold;
}

.download a {
    color: #FFF;
   font-size:0.9em !important;
    text-decoration: underline;
}

.color_1 {
    background-image: url('images/dl_1.gif');
}

.color_2 {
    background-image: url('images/dl_2.gif');
}

.color_3 {
    background-image: url('images/dl_3.gif');
}

.color_4 {
    background-image: url('images/dl_4.gif');
}

.color_5 {
    background-image: url('https://www.phpbb.nl/forums/ext/paul999/downloadpage/styles/prosilver/theme/images/dl_5.gif');
}

.color_6 {
    background-image: url('https://www.phpbb.nl/forums/ext/paul999/downloadpage/styles/prosilver/theme/images/dl_6.gif');
}

.small_left {
    float: left;
}
.small_right{
    float: right;
    margin-right: 25px;
}

.download_small {
	background-color: #ffff26;
    font-size:0.9em !important;
    margin-top:-10px;
}

.left {
    float: left;
    width: 49%;
}

.middle {
    float: right;
    width: 49%;
}

.download_heading_img {
    background-image: url("images/t_downloads.gif");
}

.always_current {
    font-size:0.9em;
    margin-top:-5px;
}
.download_top {
    margin-top: 0;
}


</style>

[Sniper_E]

At the bottom of the style settings below .download_top { add @media (max-width: 700px) { like this.

Code: Select all

.download_top {
    margin-top: 0;
}

@media (max-width: 700px) {
	.download {
		height: 72px;
		width: 270px;
	}
}
</style>

That would change the size of .download class from 300x80px to 270x72px.
Add what classes you want to change for responsive and only the lines you want different like I did the .download class.

[SpIdErPiGgY]

Nothing changes...
Maybe the css must be in a seperate file.
will try later...

[Sniper_E]

When we use <style> in a bbcode it will be at the top and the html codes at the bottom. Not to say that's the problem.
Css is normally loaded in the header and html in the body. Mobile phones are hard to clear cache to see the changes.
I have to go in mobile settings to clear cache. Check it in your desktop, it can refresh easily. Good luck.

[SpIdErPiGgY]

Got it! Thanks for the help!!.

https://www.myarea51secrets.com/phpbbdownloads