Styling applied exclusively to the field for mobile devices

Question

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?

css vue.js bulma

Answer 1

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

Answer 2

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

Styling applied exclusively to the field for mobile devices

Answer №1

Similar questions

Passing arguments inside the source attribute of an image or link tag in Node.js and

What is the best way to ensure that the viewBox of an SVG perfectly matches the size of the image it overlays?

What is the best way to conceal a menu that automatically scrolls to the content when it is clicked?

Tips for improving the styling of a django form with mixed elements

Modify Chartjs label color onClick while retaining hover functionality

Innovative HTML5 Video Canvas Shapes

MySQL unable to access information entered into form

Generating values in a loop - mastering the art of creating data points

npm package construction failed

What is causing these headers for the children not to center properly?

A guide on fetching the selected date from a datepicker in framework7 with the help of vuejs

Create a prototype class in NuxtJS Vue

Is there a way to potentially utilize window.open() to open a specific section of a webpage?

What is your preferred datepicker for Vue.js 2?

Bootstrap link causing alterations to my CSS code

When viewing a webpage on a small browser, the content will automatically expand to fill the

Using Vue Js directive to implement a Select2 component

Issues with CSS rendering in the Chrome browser are causing display problems

What is the process for accessing getBoundingClientRect within the Vue Composition API?

Is it feasible to utilize Sublime Editor for building SCSS/SASS files? Learn how to compile SCSS/SASS with Sublime Editor