Adjust the position of the element by lifting it slightly

I am looking to adjust the positioning of the number "01 / 04" to match the layout shown in this image:

https://i.sstatic.net/3MNA5.png

Here is what I have accomplished so far:

https://i.sstatic.net/6ayOx.jpg

This is how the code structure looks like in vue js at the moment:

<img id="theZoomImage" sizes="100vw" :srcset="imageSources(images[current])" :src="imageSource(images[current])" />
<div class="product-images-popup-bar">
    <div class="product-images-popup-number">
        <span class="product-images-popup-child_num">0{{current+1}}</span>
        <span class="product-images-popup-parent_num">0{{totalImageNum()}}</span>
    </div>
    <div class="product-images-popup-pagination">pagination</div>
</div>

Progress on the CSS styling:

.product-images-popup-bar {
    position: absolute;
    left: 5vw;
}

.product-images-popup-number {
    display: flex;
    align-items: flex-start;
}

.product-images-popup-child_num {
    line-height: 1;
    color: #191919;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;

    font-size: 30px;
    font-size: 7vw;
}

.product-images-popup-parent_num {
    line-height: 1;
    color: #191919;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;

    font-size: 15px;
    font-size: 4vw;
    padding: 1px 0 0 4px;
}

.product-images-popup-parent_num:before {
    content: '/';
    padding-right: 5px;
}

.product-images-popup-pagination {

}

The main objective is to slightly adjust the placement of the numbers and pagination element based on different device sizes.

One potential approach could be to determine the coordinates of "product-images-popup-bar," make necessary adjustments, and then reposition it. However, figuring out how to obtain these coordinates is currently a challenge.

cssvue.jssass

Answer №1

To elevate the desired elements slightly, assign them a position of relative and set the value of top to negative the required amount.

For instance:

.product-thumbnails-wrapper {
    display: grid;
    justify-content: center;
    position: relative;
    top: -10px;
}

Make sure to utilize media queries for further adjustments according to your preferences.

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

Vue custom directive - encountering undefined object properties

I have a unique Vue directive that I created to display or hide an element based on a specific role. Vue.directive('role', (el, binding, vnode ) => { const modifiers = binding.modifiers const roles = vnode.context.$store.state.roles; if ...

vue.jsvuejs2vue-componentdirective

The event tooltip in fullcalendar does not show up as expected

Within my Laravel 5.8 / Bootstrap v4.1.2 / jQuery jQuery v3.3.1 fullcalendar v4.3.1 application, I am attempting to incorporate tooltips for events in the fullcalendar plugin. To achieve this, I referred to a specific example provided here: Sample Example ...

javascriptcssfullcalendartooltipfullcalendar-4

Display a preview window once the image has been chosen

I have created an image preview div to show the selected image's thumbnail. Everything was working fine so far. But now, I want this div to be hidden when the page initially loads and only become visible when a user selects an image to upload. Here is ...

javascriptjqueryhtmlcss

Creating a form generator with multi-column field layout in Vue.js

Vuejs vue-form-generator typically creates form layouts with a single column view, displaying one field per row. <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator> For reference, here is a sample ...

vue.jsvuejs2bootstrap-4vue-componentvue-directives

Comparing Watch and $watch: Understanding the Distinctions

Let's ponder a question. What sets apart options from instance methods? In the context of a watch example, we can utilize a watcher as an option (https://v3.vuejs.org/api/options-data.html#watch) or as a method of an instance (https://v3.vuejs.org/a ...

vue.jsvuejs3

The iPython terminal is not displaying properly due to a constrained screen width

When my iPython displays a long list, it appears as one tall column instead of utilizing the full width of the terminal screen. I have attempted to adjust the CSS in '.ipython/profile_default/static/custom/custom.css' by setting '.container ...

pythoncssipython

How to rotate text direction using JavaScript and CSS

Despite my extensive efforts, I have been unable to find a solution to a seemingly simple problem. In JavaScript, I have generated dynamic text using the following code: context.fillText('name', 10, 10, 20); Now, I need this text to be ori ...

javascriptcss

Solution for linked picklist Vue.js element

I am struggling with fetching data for a select dropdown box in my Vue component. Specifically, I have successfully populated the hometype dropdown but I'm encountering issues with retrieving data for the duration dropdown. If anyone can offer assist ...

laravelvue.jsaxiosvue-component

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

I have encountered a situation where I need to change the HTML link values from UPPERCASE to LOWERCASE and then apply a capitalization style. The problem lies in the fact that the links arrive in uppercase, so I had to come up with a workaround: The given ...

javascriptjqueryhtmlcss

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

jquerycsscss-transitionscss-transforms

Obtain a socket object from the Vuex store

I'm currently using vue socket io to receive data from a socket. To get the data, I utilize a query like this: // ioinstance import io from 'socket.io-client' const restaurantId = localStorage.getItem('restaurant-id') const socket ...

socketsvue.jsvuejs2socket.iovuex

I encountered an issue with displaying API data in V-data-table using axios in Vue.js - unfortunately, the data was not showing up as expected

I am a novice attempting to access an API and display the data in a table using Vue.js and Vuetify. Although I have successfully retrieved the data from the API, I am encountering difficulties displaying it with v-data-table. Below is my code: HTML secti ...

vue.jsaxiosv-data-table

Utilizing jQuery time intervals within a jQuery click event: A step-by-step guide

For my dropdown menu project, I am facing an issue where the menu bar is not reappearing after collapsing the dropdown. It seems that the jQuery function responsible for toggling classes within a time interval is not executing properly. Specifically, the " ...

javascriptjqueryhtmlcss

When using the background-blend-mode property, transition-duration is not taken into account

Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...

css

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

javascripthtmljquerycss

What is the best way to properly redirect a page using a router link in Vue.js 2?

I've encountered an issue with the router-link component in Vue.js 2. I have set up my router file index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView.vue'; import ...

javascriptvue.jsvuejs2vue-router

What is the method for activating scrolling in an inner div instead of the browser window?

In the code snippet provided, I am encountering an issue where the browser window scrolls instead of the specified div with overflow-y: scroll when minimizing the browser window. How can I ensure that scrolling occurs within the div itself without making ...

css

Creating a Masonry Slider with varying heights and widths of images is a simple and effective way to showcase diverse content in a visually

I am looking to implement a unique grid image slider that accommodates images of varying heights and widths. I envision something similar to the example shown below. The image showcases a pattern where the sliders alternate between square images and two r ...

jquerycssreactjsslick.jsowl-carousel

The line directly following the first line within the <li> element is located in the same position

I need help with customizing the bullet background-image for an <li> element. I want the text in the bullet to be displayed outside the marker using the CSS property list-item-position: outside. However, my current implementation doesn't seem to ...

htmlcssflexbox

Dealing with CSS overflow issues in Safari, Chrome, and the ancient IE 6

Are Safari and Chrome compatible with overflow? How does IE 6 or higher handle overflow? ...

css