I want to see the full screen of the images referenced from the list in the template Train Catalog.

Monaca In the "Train Catalog" template, which you can choose from a new project, the train images referenced from the list have margins, up, down, left, right, and right.

image margins

Is it possible to remove this margin and display the image?

<div data-role="page"id="tokaido-page">
    <div data-role="header" data-position="fixed" class="jqm-header-custom" data-theme="c">
        <h1> Train Catalog</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li data-role="list-divider">Tokaido Shinkansen Trains</li>
            <li><a href="#"onclick="showDetail('0kei', 'Series 0')">Series 0</a></li>
        </ul>

The CSS is as follows:

display:block;
margin-left:0px;
margin-right:0px;
width: 100%;
height —100%;

monaca css

2022-09-30 13:53

1 Answers

Since the page itself has padding:15, and the image has margin:0505, set these values to 0px.

<div data-role="page"id="detail-page">

<div data-role="page" id="detail-page" class="train-page">

Change to style.css and add the following:

.train-page{
    padding-top:0px!important;
}

.train-page.ui-content{
    padding:0px;
}

.train-page.ui-content#train-image{
    margin:0px;
    width: 100%;
    height —100%;
}

2022-09-30 13:53

If you have any answers or tips

Popular Tags

python x 4628

android x 1593

java x 1493

javascript x 1425

c x 924

c++ x 877

ruby-on-rails x 696

php x 692

python3 x 683

html x 656