Joomla Templates Club 406,261 posts

[imasdtecno Friend imasdtecnoJoin date: July 2014Posts: 19Downloads:2Uploads:7 Thanked: 1 times in 1 posts]

#199951

Hi. In some screens resolutions the margins and spacings looks well and equal (1366 x 768), but whith higher resolutions (1920 x 1080) the margins of text and images are not equal causing bad display issues.

For example, in this pic i have a 1366 x 768 and all looks well.

In this pic I have a 1920 x 1080 resolution and the margin near text is increased, but the margin of the image no. The margins need to be equal in all situations.

Any fix for this issue? Thanks.

---

Attachments:

1. 
2. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#543413

Could you post your site’s URL here so that I can have a look?

[imasdtecno Friend imasdtecnoJoin date: July 2014Posts: 19Downloads:2Uploads:7 Thanked: 1 times in 1 posts]

#543445

This is the URL http://www.imasdtecnologia.com/test14/

You need a user and password to view the page. I sended an MP to you.

Thanks a lot!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#543657

You can try using media jQuery to add specific style for specific screen resolution. Here is my workaround:

– Create a new css file called custom.css in this path: /templates/ja_appolio/css
– Add this css rule:

@media screen and (min-width: 1920px){
.custom.onepage-5.onepage-image .col-md-6.col-sm-6.col-xs-12.img-left img {
margin-left: 230px;
}
}


and change the above value to suit your need.

[imasdtecno Friend imasdtecnoJoin date: July 2014Posts: 19Downloads:2Uploads:7 Thanked: 1 times in 1 posts]

#543663

I made the changes in custom.css but I can not see any changes in the website. I cleared navigator caches.

This is my custom.css placed in /public_html/test14/templates/ja_appolio/css

@media screen and (min-width: 1920px){
.custom.onepage-5.onepage-image .col-md-6.col-sm-6.col-xs-12.img-left img {
margin-left: 230px;
}
}

This is the HTML code of the module that shows the image:

<div class="clearfix">
<div class="col-md-6 col-sm-6 col-xs-12 img-left"><a href="http://www.click-arm.com"><img style="margin-bottom: 0px; margin-left: 30px;" src="images/5.png" alt="" width="593" height="333" /></a></div>
<div class="col-md-6 col-sm-6 col-xs-12 pull-right" style="text-align: justify;">
<a href="http://www.click-arm.com" style="text-decoration: none;"><h1>Click ARM. Construya su propia experiencia</h1></a>
Con Click ARM es usted, y no el fabricante, quien elige las características y la vida útil de su dispositivo, minimizando la huella ecológica y desterrando la obsolescencia programada.
<p> </p>
Click ARM es la primera tablet modular con una Placa Base Matriz a la que le puede añadir, quitar o cambiar, la memoria RAM, la memoria de almacenamiento o cualquiera de los módulos que la componen. <a href="http://www.click-arm.com">Saber más...</a></div>
</div>

This is the custom class subfix of the module:

onepage-5 onepage-image

[imasdtecno Friend imasdtecnoJoin date: July 2014Posts: 19Downloads:2Uploads:7 Thanked: 1 times in 1 posts]

#543759

Ok. Problem solved. There was a mistake in the class name.

Media query now works great except in firefox 31 for linux, in other explorers works fine. this is normal?

Thanks.

1 user says Thank You to imasdtecno for this useful post

1. Saguaros

[Author]

Posts