Problem with mobile optimization

For support and discussion related to templates and themes in phpBB 3.3.
Post Reply
joorkataa
Registered User
Posts: 25
Joined: Tue Jan 17, 2012 10:13 pm

Problem with mobile optimization

Post by joorkataa »

Hello, I encountered a pretty bad problem ...
I can't make this code work properly on the mobile version.

I tried all sorts of ways css,html, meta tags and otherss..
and does not want to work :(

I hope someone who understands to help, Thank you in advance.

Code: Select all

<style>
#outer {
    margin: 55px auto 0 auto;
    width: 990px;
    background: #fff;
}

div.letters {
    float: left;
    width: 990px;
    margin: 10px 0 0 0;
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
}
div.letters a {
    font-size: 18px;
    line-height: 38px;
    display: inline-block;
    width: 4%;
    text-align: center;
    color: #e10000;
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase;
}


ul.modelite li {
    list-style-type: none;
    display: block;
    float: left;
}
div.markite {
    float: left;
    width: 982px;
    margin: 2px 0 10px 8px;
}
div.brands,
ul.modelite {
    float: left;
    width: 982px;
    margin: 0 0 10px 0;
    padding: 2px 0 0 8px;
}
div.brands {
    padding: 0 0 0 8px;
}
div.brands div.letter,
ul.modelite li.letter span {
    float: left;
    width: 964px;
    padding: 0 0 0 10px;
    margin: 10px 0 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #e10000;
    border-bottom: 3px solid #c3c3c3;
    text-transform: uppercase;
}
a.marki_blok,
a.modeli {
    float: left;
    margin: 8px 8px 0 0;
    text-align: center;
    background: #f5f5f5;
    border: 1px solid #c3c3c3;
}
a.marki_blok {
    height: 79px;
}
a.marki_blok strong,
a.modeli strong {
    display: block;
    text-align: center;
    line-height: 24px;
    background: 0 0;
    padding: 0 11px;
    font-weight: 700;
    height: auto;
    font-size: 14px;
    color: #000;
}
a.marki_blok:hover h2,
a.modeli:hover h2 {
    color: #666;
}
a.marki_blok:hover,
a.marki_blok:hover img,
a.modeli:hover,
a.modeli:hover img {
    background: #fff;
}
a.marki_blok img,
a.modeli img {
    padding: 3px;
    margin: 2px 5px 0 5px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
}
a.modeli img {
    width: 80px;
    height: 60px;
}


</style>
<script>

if (window.top !== window.self) window.top.location.replace(window.self.location.href);
var ofst = 50;
var PROTOCOL = 'https://';
var DOMAIN = #';
var PATH = '/';
var CLOSE = 'Затвори';
var DEVICE = 'desktop';
</script>
<script src="https://vagclub.bg/images/cars/js.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">



<div id="outer">

	<div class="letters"><a href="#1">1</a><a href="#a">a</a><a href="#c">c</a><a href="#e">e</a><a href="#f">f</a><a href="#i">i</a><a href="#l">l</a><a href="#m">m</a><a href="#r">r</a><a href="#t">t</a></div><ul class="modelite"><li class="letter" id="_1"><span>1</span><ul><li><a class="modeli" href="#" title="Seat 133 - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-133_thumb.jpg" alt="Seat 133 - Технически характеристики, Разход на гориво, Размери">
					<strong>133</strong>
					</a></li><li><a class="modeli" href="#" title="Seat 1500 - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-1500_thumb.jpg" alt="Seat 1500 - Технически характеристики, Разход на гориво, Размери">
					<strong>1500</strong>
					</a></li></ul></li><li class="letter" id="_a"><span>A</span><ul><li><a class="modeli" href="#" title="Seat Alhambra - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/thumb4495622.jpg" alt="Seat Alhambra - Технически характеристики, Разход на гориво, Размери">
					<strong>Alhambra</strong>
					</a></li><li><a class="modeli" href="#" title="Seat Altea - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Altea-Freetrack-facelift-2009_thumb.jpg" alt="Seat Altea - Технически характеристики, Разход на гориво, Размери">
					<strong>Altea</strong>
					</a></li><li><a class="modeli" href="#" title="Seat Arona - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Arona-facelift-2021_thumb.jpg" alt="Seat Arona - Технически характеристики, Разход на гориво, Размери">
					<strong>Arona</strong>
					</a></li><li><a class="modeli" href="#" title="Seat Arosa - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Arosa-6H-facelift-2000_thumb.jpg" alt="Seat Arosa - Технически характеристики, Разход на гориво, Размери">
					<strong>Arosa</strong>
					</a></li><li><a class="modeli" href="#" title="Seat Ateca - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Ateca-I-facelift-2020_thumb.jpg" alt="Seat Ateca - Технически характеристики, Разход на гориво, Размери">
					<strong>Ateca</strong>
					</a></li></ul></li><li class="letter" id="_c"><span>C</span><ul><li><a class="modeli" href="#" title="Seat Cordoba - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Cordoba-II_thumb.jpg" alt="Seat Cordoba - Технически характеристики, Разход на гориво, Размери">
					<strong>Cordoba</strong>
					</a></li></ul></li><li class="letter" id="_e"><span>E</span><ul><li><a class="modeli" href="#" title="Seat El-Born - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-El-Born-Concept_thumb_1.jpg" alt="Seat El-Born - Технически характеристики, Разход на гориво, Размери">
					<strong>El-Born</strong>
					</a></li><li><a class="modeli" href="#" title="Seat Exeo - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Exeo_thumb.jpg" alt="Seat Exeo - Технически характеристики, Разход на гориво, Размери">
					<strong>Exeo</strong>
					</a></li></ul></li><li class="letter" id="_f"><span>F</span><ul><li><a class="modeli" href="#" title="Seat Fura - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Fura-025A_thumb.jpg" alt="Seat Fura - Технически характеристики, Разход на гориво, Размери">
					<strong>Fura</strong>
					</a></li></ul></li><li class="letter" id="_i"><span>I</span><ul><li><a class="modeli" href="#" title="Seat Ibiza - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Ibiza-V-facelift-2021_thumb.jpg" alt="Seat Ibiza - Технически характеристики, Разход на гориво, Размери">
					<strong>Ibiza</strong>
					</a></li></ul></li><li class="letter" id="_l"><span>L</span><ul><li><a class="modeli" href="#" title="Seat Leon - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Leon-IV_thumb.jpg" alt="Seat Leon - Технически характеристики, Разход на гориво, Размери">
					<strong>Leon</strong>
					</a></li></ul></li><li class="letter" id="_m"><span>M</span><ul><li><a class="modeli" href="#" title="Seat Malaga - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Malaga-023A_thumb.jpg" alt="Seat Malaga - Технически характеристики, Разход на гориво, Размери">
					<strong>Malaga</strong>
					</a></li><li><a class="modeli" href="#" title="Seat Marbella - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Marbella-28_thumb.jpg" alt="Seat Marbella - Технически характеристики, Разход на гориво, Размери">
					<strong>Marbella</strong>
					</a></li><li><a class="modeli" href="#" title="Seat Mii - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Mii-Electric_thumb.jpg" alt="Seat Mii - Технически характеристики, Разход на гориво, Размери">
					<strong>Mii</strong>
					</a></li></ul></li><li class="letter" id="_r"><span>R</span><ul><li><a class="modeli" href="#" title="Seat Ronda - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Ronda-022A_thumb.jpg" alt="Seat Ronda - Технически характеристики, Разход на гориво, Размери">
					<strong>Ronda</strong>
					</a></li></ul></li><li class="letter" id="_t"><span>T</span><ul><li><a class="modeli" href="#" title="Seat Tarraco - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Tarraco_thumb.jpg" alt="Seat Tarraco - Технически характеристики, Разход на гориво, Размери">
					<strong>Tarraco</strong>
					</a></li><li><a class="modeli" href="#" title="Seat Toledo - Технически характеристики, Разход на гориво, Размери">
					
					
					<img src="/images/cars/Seat-Toledo-IV-NH_thumb.jpg" alt="Seat Toledo - Технически характеристики, Разход на гориво, Размери">
					<strong>Toledo</strong>
					</a></li></ul></li></ul>
</div>
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Problem with mobile optimization

Post by Mannix_ »

For one you have set a fixed width on a bunch of elements and that will prevent it from shrinking on smaller screens. Try using

Code: Select all

max-width: your width; 
width: 100%;
combo
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
joorkataa
Registered User
Posts: 25
Joined: Tue Jan 17, 2012 10:13 pm

Re: Problem with mobile optimization

Post by joorkataa »

That's right again.
I'm attaching photos to show exactly what the problem is.


This is what it looks like on a computer
1.png
This is mobile version
11.jpg
And it should look like this under mobile devices
22.jpg
But when I make it look good on mobile devices it breaks down on the desktop
2.png
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Problem with mobile optimization

Post by Mannix_ »

Code: Select all

.letters {
    margin: 10px 0 0 0;
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
}

.letters a {
    font-size: 18px;
    line-height: 38px;
    display: inline-block;
    color: #e10000;
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase;
    padding: 5px 8px;
}

div#outer {
    max-width: 990px;
    background: #fff;
}

ul.modelite  li {
list-style-type: none;
display: flex;
flex-direction: column;
}

ul.modelite li span {
    padding: 0 0 0 10px;
    margin: 10px 0 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #e10000;
    border-bottom: 3px solid #c3c3c3;
    text-transform: uppercase;
}

.letter ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.modeli img {
    padding: 3px;
    margin: 2px 5px 0 5px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
}

a.modeli {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    margin: 8px 8px 0 0;
    background: #f5f5f5;
    border: 1px solid #c3c3c3;
}

.modeli strong {
    line-height: 24px;
    background: 0 0;
    padding: 0 11px;
    font-weight: 700;
    height: auto;
    font-size: 14px;
    color: #000;
}
this should get you started good luck
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
AlfredoRamos
Recognised Extension Developer
Posts: 1302
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo
Contact:

Re: Problem with mobile optimization

Post by AlfredoRamos »

You can use media queries to add CSS code only for smaller screens or better yet, use flexbox to align those images instead of using a list.

You could also fix it by setting list elements as display: inline-block instead of using float.
Some of my phpBB extensions:
:chart_with_upwards_trend: SEO Metadata | Image Markdown | :shield: hCaptcha
:trophy: Check out all my validated extensions :trophy:

:penguin: Arch Linux user | Linux Boards :penguin:
joorkataa
Registered User
Posts: 25
Joined: Tue Jan 17, 2012 10:13 pm

Re: Problem with mobile optimization

Post by joorkataa »

Mannix_ wrote: Tue Jul 20, 2021 4:32 pm

Code: Select all

.letters {
    margin: 10px 0 0 0;
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
}

.letters a {
    font-size: 18px;
    line-height: 38px;
    display: inline-block;
    color: #e10000;
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase;
    padding: 5px 8px;
}

div#outer {
    max-width: 990px;
    background: #fff;
}

ul.modelite  li {
list-style-type: none;
display: flex;
flex-direction: column;
}

ul.modelite li span {
    padding: 0 0 0 10px;
    margin: 10px 0 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #e10000;
    border-bottom: 3px solid #c3c3c3;
    text-transform: uppercase;
}

.letter ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.modeli img {
    padding: 3px;
    margin: 2px 5px 0 5px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
}

a.modeli {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    margin: 8px 8px 0 0;
    background: #f5f5f5;
    border: 1px solid #c3c3c3;
}

.modeli strong {
    line-height: 24px;
    background: 0 0;
    padding: 0 11px;
    font-weight: 700;
    height: auto;
    font-size: 14px;
    color: #000;
}
this should get you started good luck
Yes it already works thank you very much :)
Post Reply

Return to “[3.3.x] Styles Support & Discussion”