Mobile layout

There are 2 layout types for mobile. The first one is Tablet Portrait layout and Tablet Lanscape layout ( the Landscape layout is the Normal Layout). The mobile layout uses percentage (%) as unit to define width of the layout. The full width of the layout is 100%, from that, you can define width for each element in the template.

Mobile Landscape layout

Front-end Appearance

To define width of the layout, please navigate to: [your_site] / templates / ja_elastica / core / etc / layouts / default.xml. The file default.xml is to define width range of each layout.

{codecitation} css/layout-mobile.css {/codecitation}

As defined here, the layout has maximum width = 719 px. And with the condition, the layout will use the layout-mobile.css file under the your_site/templates/elastica/css folder to be the style of the layout ( the Css file contains configuration for style of the layout including: width, font size, logo size, ... )

{codecitation} .main { width: 100%; } .column { float: none; width: 100% !important; } /* MASONRY PRESETS (240px*5 Grids) --------------------------------------------------------- */ /* Sizes---*/ .ja-masonry { width: 49%; } .grid-double, .grid-tripple { width: 100%; } {/codecitation}

As defined in the code above, the width is re-defined. In mobile landscape layout, the ja-masonry (grid) is converted to percentage (%). One grid is now = 49% width in mobile landscape layout, and grid-double, grid-tripple are now = 100% width (full width). You can change the rate here.

Mobile Portrait layout

Front-end Appearance

To define width of the layout, please navigate to: your_site/templates/elastica/core/etc/layouts/default.xml. The file default.xml is to define width range of each layout.

{codecitation} css/layout-mobile-port.css {/codecitation}

As defined here, the layout has maximum width = 479 px. And with the condition, the layout will use the layout-mobile-port.css file under the your_site / templates / elastica / css folder to be the style of the layout.

{codecitation} /* MASONRY PRESETS (240px*5 Grids) --------------------------------------------------------- */ /* Sizes---*/ .ja-masonry, .grid-double, .grid-tripple, #ja-header .main, #ja-content, .item { float: none !important; width: 100% !important; } {/codecitation}

As the code defined, in the mobile portrait layout, .ja-masonry, .grid-double, .grid-tripple are now = 100% width (full width) ---> content and modules have same size (all are = 100%).

 

Roboticando

Conheça o meu site de robótica, matemática e impressão 3D:

 
 

Did you guys try out this responsive Joomla 2.5 web design?

_ about 3 hours ago

Main Menu

 

Dr. Pedro

Dr Pedro

Esse é o médico que cuida de mim, aquele que conseguiu me tirar das internações constantes! Clique na figura e vá até sua página lá você encontra como entrar em contato com ele.

 

Template features

1. Responsive
Pellentesque auctor leo fringilla pulvinar.
2. Grid System
Pellentesque auctor leo fringilla pulvinar.
3. Multiple Block style
Pellentesque auctor leo fringilla pulvinar.
JA Elastica is our first responsive web design!

_ JoomlArt

 

DESCONTO!

Conseguimos um cupom de desconto para a compra da Stella². Basta acessar o site http://www.boaimpressao3d.com.br e inserir ANAPAULA no campo de desconto na hora da compra da sua Stella²!

Por que comprar uma? Simples, já vem montada, calibrada, com garantia e suporte técnico no Brasil! Produto brasileiro! Super indico!

 

Badge new

Pellentesque sed aliquet mauris iaculis pretium dapibus porttitor. tincidunt sem quam Morbi nulla elit a tortor vitae.
 

Hot video

Sample video

Quis eros Aliquam et diam ac a dolor nec nunc accumsan. Vitae velit tortor nunc dolor turpis.

Red module

 Sapien condimentum tellus ac In a eget molestie lacus et porttitor.

 

Our Gallery

 

My love song

Audio Etiam pellentesque magna id lacus imperdiet ac vulputate enim semper. Donec tincidunt.

Blue module

 Sapien condimentum tellus ac In a eget molestie lacus et porttitor facilisi.

Violet module

 Sapien condimentum tellus ac In a eget molestie lacus et porttitor.

Who's Online

Temos 318 visitantes e Nenhum membro online

Dark module

 Sapien condimentum tellus ac In a eget molestie lacus et porttitor.

Green module

Joomla Tutorial

How to Apply a Module Class Suffix in Joomla 2.5?

  1. Login to backend.
  2. Go to the Module Manager.
  3. Select the Module you want to edit.
  4. Type the Module Class Suffix into the parameters to the right.
  5. Save the Setting.
Loading ...