Off-TopicMake page responsive

All the various Off-Topic crap here ;)
Previous topicNext topic
User avatar

Topic Author
Onnozel Manneke
Users
Users
Magic user status: Offline
Posts: 73
Joined: Feb 4th, '21, 22:54
    Android Firefox

Make page responsive

Post by Onnozel Manneke »

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>

[ Posted using my Android device ]
phpBB NL Extension translations, also on request.
--> Click Here: Myarea51secrets.com <--
User avatar

Sniper_E
VIP
VIP
Magic user status: Offline
Posts: 1113
Joined: Oct 14th, '14, 17:01
    Windows 10 Firefox

Re: Make page responsive

Post by 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.
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™
User avatar

Topic Author
Onnozel Manneke
Users
Users
Magic user status: Offline
Posts: 73
Joined: Feb 4th, '21, 22:54
    Android Firefox

Re: Make page responsive

Post by Onnozel Manneke »

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

[ Posted using my Android device ]
User avatar

Sniper_E
VIP
VIP
Magic user status: Offline
Posts: 1113
Joined: Oct 14th, '14, 17:01
    Windows 10 Firefox

Re: Make page responsive

Post by 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.
User avatar

Topic Author
Onnozel Manneke
Users
Users
Magic user status: Offline
Posts: 73
Joined: Feb 4th, '21, 22:54
    Android Firefox

Re: Make page responsive

Post by Onnozel Manneke »

Got it! Thanks for the help!!.

https://www.myarea51secrets.com/phpbbdownloads

[ Posted using my Android device ]
Previous topicNext topic