Implement CSS to stack images upon zooming

On my menu page, I have two images that I want to display side by side in the web browser and stacked on top of each other in a column when viewed on mobile. Currently, with framework7's row and column classes, the images are positioned next to each other in the web browser.

<div class="row">
    <div class="col-50">
       <a href="page1.html"><img src="css/images/image1.png" height="50%" width="50%"></a>
    </div>
    <div class="col-50">
        <a href="page2.html"><img src="css/images/image2.png" height="50%" width="50%"></a>
    </div>
</div>

However, when switching to mobile view, the images remain side by side which makes it difficult to click on them. I've been experimenting with different solutions but haven't found the right way to stack them in a column for mobile view yet.

htmlcssmobileresponsive-designhtml-framework-7

Answer №1

One strategy to enhance your website layout is by creating separate CSS classes for Web and Mobile platforms. This approach allows for greater flexibility in organizing the mobile view of your site.

An effective method is to assign the class name 'mobile' to your framework7 index.html during app initialization, which can help identify if the site is being accessed from a mobile device.

To determine if the device accessing the site is a mobile device, you can check the 'userAgent'. For more information, refer to How to detect a mobile device with JavaScript?

You can then define specific classes exclusively for mobile devices in the following manner:

.mobile .container {
   color: red;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to connect to a style sheet

I'm in the process of developing a web application and I'm facing an issue with linking a stylesheet to my app. Check out my code below: <html> <head> <title>Bubble</title> </head> <link rel=" ...

css

Discover how to display the loading time and memory usage of a web page on the footer using the jQuery and AngularJS library

Does anyone know how to display the loading time and memory usage of a web page in the footer using jQuery and AngularJS libraries? I've managed to show the loading time with this jQuery code: <script type="text/javascript"> before = (new Date( ...

javascriptjqueryhtmlangularjs

Issue: Access to sdcard/hello.mp3 file denied due to permission error (EACCES)

While testing the "react-native-audio-recorder-player": "^3.5.3" on Android 11 & 12 with targetSDKversion 31, I encountered the error message Error: sdcard/sound.mp3: open failed: EACCES (Permission denied). Numerous suggested solut ...

javascriptandroidreact-nativemobileaudio-player

Activate the saturation toggle when a key is pressed in JavaScript

I am trying to modify a script that currently toggles the value of a variable when a key is pressed and then lifted. Instead of changing the variable value, I would like to adjust the saturation of the screen based on key presses and releases. How can I ac ...

javascripthtmljquerycssfrontend

Access a designated tab using cbpFWTabs

I am currently using the cbpFWTabs plugin from Tympanus for my tabs (http://tympanus.net/Development/TabStylesInspiration/). However, I am struggling to open a specific tab upon page load. I have attempted to create a show method within the page script, bu ...

javascriptjqueryhtmltabs

Firefox not responding to input select dropdown selection

When creating a jQuery submenu box in Firefox, I encountered an issue with the input select dropdown. While it functions properly in Google Chrome, the select box behaves erratically in Firefox. When attempting to choose an option from the select box, such ...

javascriptjqueryhtmlcssfirefox

Updating text color in JavaFX for a textarea

I'm having trouble getting this to work. After checking the CSS analyzer in the scene builder, it seems that changing the text color in a textarea requires something like this: .text-area .text { -fx-fill: #1e88e5; -fx-font-size: 32px; } How ...

cssjavafx

HTML checkbox utilizing JavaScript

<input type="checkbox" name="smoker"> Is there a way for JavaScript to determine whether the checkbox is checked or unchecked without making changes to the HTML code above? ...

javascripthtml

Rotation of the SVG coordinate system distorts angles

My comprehension of SVG, particularly the viewport, viewBox, and the user coordinate system, seemed fairly solid. In the initial example provided below, we utilized a viewBox with a matching aspect ratio as the viewport. As expected, there was no distorti ...

htmlcsssvg

creating a personalized tooltip for every item within a dynamically generated @html.dropdownfor control in mvc3

Currently, I am developing a web project using MVC 3 and Razor in C#. In my code, I have implemented @Html.DropDownListFor to dynamically display items. Now, I would like to add tooltips for each item displayed by @Html.DropDownListFor. Here is the relev ...

jqueryhtmlasp.net-mvctooltipdropdownlistfor

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...

javascriptjqueryasp.netcssajax

Creating a visually appealing background image using WordPress and PHP

Currently struggling with adjusting the width of an image that's set as a background in Wordpress. The text is perfectly centered, but the background image remains full size and I want it to match the container size... You can view the image at the t ...

phphtmlcsswordpressimage

Tips for detecting the height of a row with 2 columns in CSS

I am attempting to create two text/image boxes side by side, where one box dictates the height of both on desktop. In this scenario, the leftcol box should expand its background color to match the size of rightcol and center the content. On mobile devices, ...

htmlcssflexbox

A JavaScript function that is only triggered half of the time

After browsing through various forums like StackOverflow, I couldn't find a solution that perfectly fits my issue. I may be new to programming, but I've managed to create several projects already. Currently, I am working on integrating them into ...

javascripthtmlfunctiononload

Variables for HTML comment form using PHP mail

How do I properly pass HTML form variables to a PHP mailer? The PHP code is: $comment = $_POST['comment']; $email = $_POST['email']; $to = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60131313 ...

phphtmlformsvariablesmailer

A step-by-step guide to incorporating expandable and collapsible images within a div element using X

I have successfully created dynamic divs with some data that expand and collapse perfectly. Now I am looking to add expand and collapse images on these divs. I am relatively new to designing in xslt. <xsl:template match="category[key!='org.model.C ...

javascriptjqueryhtmlcssxslt

I attempted to apply vertical-align and color properties to the static_nav div, but they didn't have any effect. Could this be due to its placement within the header? What steps should I take to resolve this issue?

<!DOCTYPE HTML> <html lang ="en"> <meta charset = "utf-8" /> <head> <title>Sample Page</title> <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" /> </head> <body> &l ...

htmlcssvertical-alignment

Creating a Validation Form using either PHP or JavaScript

I need to create a form with the following columns: fullname, email, mobile, and address. If the visitor fills out the mobile field, they should only be allowed to enter numbers. And if the visitor fills out the email field, they should only be allowed to ...

javascriptphphtmlajax

Convert HTML files to .csv format

Is there a way to export a table from an HTML page directly to a .csv file without having to use additional code? Currently, I am using the following method: private void GenerateExcelFileOnType(string filePath1, ref DataTable dt) { if ...

htmlmodel-view-controller

Tips for displaying the HTML content within the autocomplete box

My situation involves a text input and an HTML form where users can submit their name to retrieve information. I am using AJAX to display the usernames dynamically. <div class="hidesearch" id="search" style="width:"400px;"> <inp ...

javascripthtmlcss