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:

Here is what I have accomplished so far:

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

"What might be causing the error 'cannot access property 'top' of undefined' while trying to read

My website has a sticky navbar fixed at the top, and this is the structure of my sticky navbar: $(function() { $(window).scroll(function() { if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") { ...

javascriptjqueryhtmlcss

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...

jqueryhtmlcss

Steps for accessing req.session in nextServerInit before rendering:1. Start by importing the

Currently, I am in the process of setting up a website using nuxt+express by running 'vue init nuxt-community/express-template' command. The specific feature I am focusing on is "auth". My goal is to maintain the user's information stored co ...

expressvue.jsnuxt.js

How can two unique links toggle the visibility of divs with two specific IDs?

I am developing an interactive questionnaire that functions like a 'create your own adventure' story. The questions are shown or hidden depending on the user's responses. Below is the HTML code: <!-- TIER 3 ============================== ...

javascriptjqueryhtmlcss

What is the method for showcasing background images sequentially?

css code #intro { position: relative; background-attachment: fixed; background-repeat: no-repeat; background-position: center top; -webkit-background-size: cover; -moz-background-size: cover; backgr ...

javascriptjqueryhtmlcss

mobile-responsive vertical alignment using Bootstrap

Here is a jsbin that demonstrates the issue and here is the markup: <div class="row"> <div class="col-sm-4 xs-12"> <strong>UK Postcode</strong> </div> <div class="col-sm-4 xs-12"> <strong>Other Fie ...

csstwitter-bootstraptwitter-bootstrap-3

Zoom in and Zoom out functions in ngPdf with centered view

I have incorporated the pdf canvas to showcase PDFs on my AngularJS/Bootstrap application, and I must say, the preview feature is working exceptionally well. However, one thing that I would like to achieve is centering either my modal or the canvas itself ...

cssangularjscanvaszooming

Leverage object properties as data table field values in VueJS

In my current project, I am utilizing VueJS (version 2.5.9) to display and modify data tables within an administrative application. Initially, I used a basic Grid component for the data table, following an example provided here. However, I came across an e ...

javascripthtmlvue.jsvuejs2vue-data-tables

CSS Transition - Troubleshooting my malfunctioning code

I seem to be facing a simple issue with my code. The following snippet does not work in Chrome or Firefox, as the transition property is not working properly. Instead of smoothly transitioning from blue to red when hovered over, the element immediately swi ...

csscss-transitions

Pressing the "Enter" key on v-autocomplete causes the page to refresh

Recently, I integrated v-autocomplete into my webpage. However, whenever the cursor is inside the v-autocomplete control and I press "Enter", the page reloads automatically. Is there a way to stop this from happening? ...

vue.jsvuetify.js

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

javascripthtmlcss

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Is there a way to hide all content on a page except for a specific element and its children using CSS? I've been exploring the :not selector, but I'm struggling to make it work with the * selector. :not(.list-app) { display: none; } :not(. ...

css

problem with the clientHeight attribute in window event handlers

The component below is designed to react to changes in window resize based on the container height. However, there seems to be an issue where the containerHeight variable increases as the window size decreases, but does not decrease when I make the window ...

javascriptcssreactjsflexbox

Troubleshooting Cross-Origin Resource Sharing Problem in Vue.js Single Page Application and Node.js API

My Node.js Express app is set up with the cors npm package installed. Additionally, there is basic authentication enabled on the nginx server hosting my Node.js app (authentication requires an 'Authorization' key in the headers of each request). ...

node.jsvue.jscorsvue-resource

Text font automatically adjusts size in Chrome on Android

It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...

androidhtmlcssgoogle-chromefont-size

Methods for scaling the size of CSS background images

Can anyone assist me with scaling background image size properly? code: http://codepen.io/AnilSimon123/pen/JRBRZa Below is the code snippet: .bgimage{ background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vec ...

htmlcss

Canvas Frustratingly Covers Headline

Several months ago, I successfully created my portfolio. However, upon revisiting the code after six months, I encountered issues with its functionality. Previously, text would display above a canvas using scrollmagic.js, and while the inspector shows that ...

javascripthtmlcssscrollmagic

Trouble with Webpack alias functionality observed during deployment on Heroku

After setting up a demo app for a library project at my company, I successfully deployed it to Heroku using Vue CLI with webpack and node integration. Recently, I realized the necessity of generating a translations file post-build. To achieve this, I incor ...

node.jsvue.jsherokuwebpack

What are the pros and cons of passing an imported object from a parent component to its children as props versus directly importing that object within the children components?

My current project involves a helper object known as TimeHelper, which is used for time-related tasks. This object is required in multiple components within the top-level parent component. I am contemplating whether it would be advantageous to import Time ...

javascriptvue.jsvuejs2components

Gatsby causing issues with Material UI v5 server side rendering CSS arrangement

I shared my problem on this GitHub issue too: https://github.com/mui-org/material-ui/issues/25312 Currently, I'm working with the Gatsby example provided in Material UI v5: https://github.com/mui-org/material-ui/tree/next/examples/gatsby After imple ...

javascriptcssreactjsmaterial-ui