How to move objects vertically in mobile view

-
Here is the desktop view. The image on the right needs to be pushed down in mobile view. The code is set to move down the right image (or any object) if the width of the screen is below 600px.

Here is the mobile view. 

Essential CSS code for bringing this effect 


Place the below code within <style type="text/css"> .......... </style>


@media only screen and (max-width:600px) {
td.two-col {
 display: block!important;
 width: 100%!important;
}

.boxShift td {
 width: 50%!important;
}
.boxShift td table {
 width: 100%!important;
}
}

 
 @media only screen and (max-width:600px) {
 #boxShift, .boxShift {
 width: 100%!important;
}
}

@media only screen and (max-width: 600px) {
body .hide {
 display: none !important;
}
body .singlefile {
 width: 100% !important;
 max-width: 300px !important;
 display: block !important;
}
}

Essential HTML code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Object shift down in mobile</title>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-attachment: scroll; background-image: none; background-position: top left; background-repeat: repeat; font-family: arial,helvetica,sans-serif; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" id="backgroundTable" style="background-attachment: scroll; background-color: #d9f4f7; background-image: none; background-position: top left; background-repeat: repeat; border-collapse: collapse; line-height: 100% !important; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; width: 100% !important;">
<tr>
    <td style="border-collapse: collapse;" valign="top"><table border="0" cellpadding="0" cellspacing="0" id="rowsTable" style="border-collapse: collapse; line-height: 100% !important; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; width: 100% !important;">
<tr>
          <td align="center" style="border-collapse: collapse;">
  <!-- mobile sliding 600 -->
         
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="singlefile" id="boxShift" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 600px;">
<tr>
                <td class="two-col" style="border-collapse: collapse;"><table border="0" cellpadding="0" cellspacing="0" class="boxShift" style="border-collapse: collapse; height: 120px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: center; width: 300px;">
<tr>

                      <td style="border-collapse: collapse;"><a href="https://www.blogger.com/blogger.g?blogID=805700699236091931#" target="_blank">
<img alt="" class="singlefile" src="sky.jpg" style="-ms-interpolation-mode: bicubic; border-style: none; outline-style: none; text-align: center; text-decoration: none;" width="290" />
</a></td>
                   
                    </tr>
</table>
</td>
                <td class="two-col" style="border-collapse: collapse;"><table border="0" cellpadding="0" cellspacing="0" class="boxShift" style="border-collapse: collapse; height: 120px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: center; width: 300px;">
<tr>
  <td><img alt="" class="singlefile" src="wave.jpg" style="-ms-interpolation-mode: bicubic; border-style: none; outline-style: none; text-align: center; text-decoration: none;" width="290" /></td></tr>
</table>
</td>
              </tr>
</table>
<!-- End mobile sliding 600 --></td>
        </tr>
</table>
</td>
  </tr>
</table>
<!-- End of wrapper table -->
</body>
</head></html>



Comments

Post a Comment

Popular posts from this blog

How to select and cut out an image in Krita

-
Image
We are going to cut out the image of the magazine from the above image.  Make sure the layer you want to select is active at the layers window. Use Polygonal selection tool for selecting the image you want to cut out. Start selection from left top corner and follow to right top, then to right bottom. Complete the selection process by selecting the starting point at the left top corner. Now the entire magazine is selected.  Go to Edit and Cut (Ctrl X)  Go to Edit and Paste (Ctrl V) The cut out part is now pasted on to a new layer which is automatically created.  Important: Use Ctrl + H to deselect the selection. Use Rectangular selection tool, Elliptical selection tool, Free-hand selection tool etc for selecting images of different shapes and types. Free-hand selection tool is very much useful for irregular shapes.
Read more

Transform and Stretch an image in Krita

-
Image
Make sure that 'Tool Options' is active. If not, to make it active and available, do the following  Go to Settings, Dockers and select 'Tool Options' Now you will see the Tool Options available for you to use.  Here is the image you want to transform. You want to stretch the top part of the image to make it look better.  Select Transform tool.  Then click on the layer you want to edit. Now you will see hands appearing on the sides of the image. Now select the 'Perspective tool' from the  'Tool Options' Stretch the top part of the image by holding the top handles and dragging to the direction you want.  Now it is done.  Use the 'Wrap' tool, 'Cage' and 'Mesh' tools to make your image transformation funny.   
Read more

Joomla error: Your site may not have been upgraded completely

-
When you try to upgrade Joomla, sometimes you may encounter with this error Joomla Update encountered a server error when applying the update to your site. Your site may not have been upgraded completely to the new Joomla version. Solution Open configuration.php and look for  public $live_site = 'https://yourSite.com/';   Make sure that this part correct. Some times you did something in .htaccess file for redirection in the past. (For example the url may contain www)
Read more