Styling applied exclusively to the field for mobile devices

As I work on creating a navigation bar using Bulma and Vue.js, I encounter an issue with the dropdown menu behavior. When the navbar collapses into the hamburger menu, the dropdown list remains in display: block; mode. To address this, I attempted a workaround that unfortunately applies the same style to all screen sizes.

To solve this problem, I experimented with binding styles directly in the template:

<div class="navbar-dropdown" :style="@media screen and (max-width: 900px){display: this.displayBlockAcad}">

This attempt resulted in an error message:

invalid expression: Invalid or unexpected token in

@media screen and (max-width: 900px){display: this.displayBlockAcad}

I created a jsfiddle demo for illustration purposes. If you remove 

@media screen and (max-width: 900px)
from line 26, the jsfiddle will run without errors, but the is-hoverable class in line 22 will stop working. Is there a way to make the dropdown hoverable on desktop screens while maintaining custom styling for media screens?

cssvue.jsbulma

Answer №1

You must remember that when binding styles in Vue.js, you should pass an object and not a string. Using :style as a binding attribute is invalid. If you want to define a @media expression, make sure to include it within a style tag or in a CSS file. Create a unique class and assign it to your element.

v-bind:style="{key:property}" // object passing

Check out this link for more information on how to bind styles in vue.js: https://v2.vuejs.org/v2/guide/class-and-style.html

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

Ways to superimpose images

Everything seems to be functioning correctly in my code, but I would like the output images to overlap slightly. This could possibly be achieved using margins, padding, or some other script. Additionally, is there a way to incorporate z-index so that the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for adjusting image size using media queries

How can I ensure that the image resizes correctly on smaller screens? Currently, the image spills over the container and there are gaps between the top/left of the container and the image. Should I adjust the image size in the media query or expand the con ...

htmlcss

"CSS - Struggling with header alignment in a table display element - need help with positioning

During my HTML layout creation process, I encountered a peculiar positioning issue that proved difficult to resolve. Consider the following HTML structure: <div class="outer-wrap"> <div class="header"> I am a Header </div> <div c ...

htmlcss

Having trouble accessing Vuex's getter property within a computed property

Can you help me troubleshoot an issue? When I call a getter inside a computed property, it is giving me the following error message: TS2339: Property 'dictionary' does not exist on type 'CreateComponentPublicInstance{}, {}, {}, {}, {}, Com ...

javascripttypescriptvue.js

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

javascripthtmlcssbootstrap-4carousel

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

javascriptjquerycsssticky-footer

Steps for initializing a Vue component instance by passing parameters

Being a novice in the realm of Vue, I am eager to gain knowledge on how to effectively create and reuse Vue components. However, I am encountering an issue where the initial data passed to a component does not update upon a click event. Shown below is a ...

javascriptvue.js

Blend a background image using rgba without incorporating a gradient effect

Can you merge a background image with an rgba color without resorting to an rgba gradient? My current CSS3 style appears as follows: html { background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../icons/sombrero.jpg")no-repe ...

htmlcss

Combining Multiple Results into One Unique Output using a Lodash Function

<span v-for="r in results" >{{ r.owner.first_name }} {{ r.owner.last_name}} </span> I want to ensure that only one occurrence is displayed for the result. So, with the provided code snippet, I am currently seeing: John Doe John Doe John ...

vue.jsvuejs2lodash

What is the best way to add the current date to a database?

code: <?php session_start(); if(isset($_POST['enq'])) { extract($_POST); $query = mysqli_query($link, "SELECT * FROM enquires2 WHERE email = '".$email. "'"); if(mysqli_num_rows($query) > 0) { echo '<script&g ...

javascriptphpjqueryhtmlcss

What is the best way to choose all initial elements within a single row using CSS?

Is it possible to target all the first elements in a single row? I know this is an unusual request, but I have a row that contains block elements. I want to apply CSS styling to each of the first elements. Here is the row: <ul class="slides"> &l ...

htmlcsselement

Encountering 401 unauthorized error in Laravel Passport, Vue.js, and Axios integration

I am fairly new to VueJS and I am trying to retrieve data from a Laravel (passport) API. To do this, I have used npm i axios for making API requests. Below is the script code from my App.vue file: import axios from 'axios'; export default { da ...

javascriptlaravelvue.jshttp-headersaxios

Preventing Users from Uploading Anything Other than PDFs with Vue

I am currently working with Bootstrap-Vue and Vue2. Utilizing the Form File Input, I want to enable users to upload files, but specifically in PDF format. To achieve this, I have included accept="application/pdf": <b-form-file v-model=&quo ...

javascriptvue.jspdfbootstrap-vue

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

How can I make the first item in this grid span 100% without changing the HTML structure? The first item is assigned an extra class ".sub" Is it possible to achieve this? Click here for more information <div class="fd-col fd-5col"> <div class= ...

csscss-grid

Experiencing issues with a malfunctioning Chrome extension? The CaptureVisibleTab feature seems to be failing when using

Whenever I try to use the captureVisibleTab function on a page where I have a div with preserve3d in CSS3, all I see is a blank page. How can I solve this issue? Here is my simple code for capturing the browser screen: chrome.browserAction.onClicked.addL ...

google-chromecssgoogle-chrome-extension

Image in the background not showing up on Chrome or Internet Explorer

The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file: <head> ...

cssasp.netgoogle-chromeinternet-explorerfirefox

Achieve maximum height with background images

Having trouble with responsiveness on my box containing a background image. I am aiming for the box to adjust its height based on the background image, as I have set the background-size attribute to auto. html: <div class="index_boxs" id="discover_win ...

javascripthtmlcss

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...

javascripthtmlcssreactjs

Where could one possibly find the destination of the mysterious <circle>?

I want to implement a simple pulsating animation on a circle svg element. I attempted using a transform: scale(..,..) animation, but it seems to be shifting the entire circle within its container instead of just scaling the element itself. This is the cur ...

csssvgcss-animations

A CSS hack for showcasing numerous div elements

I am looking to divide my window into two equal parts, with the same height but each taking up 50% of the width. Here is the CSS I used: .container { display: flex; height : 100%; } .column { flex: 1; height : 100%; } .column-one ...

htmlcssflexbox