What is the process of transforming a PSD file into a responsive HTML file?

I have a PSD file with multiple images that I need to display on my responsive website. The challenge is that when the images are displayed inside the webpage, their position needs to be set to absolute in order to maintain layout integrity. However, when viewed on mobile devices, the positioning of the images shakes.

Is there a way to export this PSD file to HTML or SVG format and ensure that the positions of the images remain fixed?

<div class="col-md-10">
    <img src="~/Images/package.png" class="img-responsive"/>
    <img src="~/Images/makesh.png" />
</div>

csshtml

Answer №1

Have you considered setting a `max-width` for your image container?

.image_container{ text-align: center;}
.image_container img{ max-width: 100%;}
<div class="image_container">
    <img src="https://i.sstatic.net/VuXLO.png" alt="gas-pipe">
    <img src="https://i.sstatic.net/Lr6u0.png" alt="gas-pipe">
</div>

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

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

javascriptcsshtml

Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...

jqueryhtmlcssanimationeffects

Having difficulty in getting a hyperlink to open in a new tab with _blank attribute

I'm currently working with this code for my link. <a href="https://dribbble.com/jamesfrewin"><img class="socialicon" src="images/icons/dribbble_dark.png" onmouseover="this.src='images/icons/dribbble_pink.png'" onmouseout="this.src= ...

htmlhyperlink

Optimizing Open Graph tags for sharing WhatsApp links

I am utilizing Open Graph tags to optimize sharing on social media platforms. The image I have specified is 1200 x 630 pixels and displays correctly on Facebook as well as Whatsapp: <meta property="og:image" content="https://emotionathlet ...

htmlfacebook-opengraphwhatsappsocial-media

Issues with audio and video playback intermittently occurring on Sencha Touch 2

As a beginner with Sencha Touch 2, I am currently working on uploading images onto an iPad using Xcode. My app has audio playing on the home screen, and I want the video to start playing and the audio to stop when a specific tab is selected. However, the ...

javascripthtmlcssextjs

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

javascriptjqueryhtmlcssfirefox

The vertical scrolling issue arises when the content exceeds the height of the screen

Seeking a solution to enable scrolling of users within a flexbox menu, I've come across an interesting discovery. When setting a specific height in pixels for my nav element (like 100px), everything works perfectly. However, when I set the height to 1 ...

cssbootstrap-4

Issue with ASP.NET Base64 image source rendering incorrectly

After retrieving a Base64 string from Azure active directory using a Lambda function, which represents a user's profile picture, I am facing issues displaying it on an ASP.NET page. Below is the code snippet in ASP.NET (The referenced HTML object is ...

htmlasp.netimagebase64

Tips for successfully passing array index as an image source in Vuejs with v-img?

Hi there! I'm currently attempting to cycle through an array of URLs and insert them into the src attribute. I'm struggling with the correct syntax to accomplish this task. Would you be able to lend a hand? I have an array named DataArray that co ...

javascripthtmlvue.jsvuejs2vuetify.js

What could be causing my divs to overlap one another?

I can't seem to get these divs to stack properly, they keep overlapping. I've tried removing the float and checking every attribute in the code. I'm not sure where I'm going wrong. The structure of the rest of the page is similar, but ...

htmlcss

Tips for entering Tamil characters in text boxes on a form field

Within my form, I have a set of text boxes. I am looking to input text in Tamil font for specific text boxes - around 5 out of the total 10 text boxes in the form. If you know how to enable Tamil font input for multiple text boxes (rather than just one as ...

javascriptphpjqueryhtmltamil

What strategies and techniques should be considered when creating websites optimized for mobile devices?

With a wealth of experience in programming languages like Java, Python, and C, I actively engage in self-study to enhance my skills. While I have dabbled in creating mobile-friendly websites, upon reviewing my work, it is evident that my frontend developme ...

javascripthtmlcssreactjsdesign-patterns

Leveraging the power of PHP and AJAX for seamless transmission and reception of JSON data through a

I am in the process of creating a basic form that consists of a single text field and a submit button. The goal is to have the entered value posted to a $.getJSON method upon clicking the button, which will then retrieve a JSON response and display it on t ...

phpjqueryhtmlajaxjson

I am currently experiencing issues with my logo not aligning properly within the navigation bar

I am struggling with the whole concept of bootstraps. If there is anyone out there who can provide some guidance, I would greatly appreciate it. Unfortunately, my style sheet is unable to connect to this website. The appearance of my navigation bar curre ...

htmlcssbootstrap-grid

Instructions for concealing and revealing a label and its corresponding field before and after making a choice from a dropdown menu

Currently, I am working on developing a form that will enable customers to input their order information. This form includes a selection list for payment methods, with three available options. If the user chooses either credit or debit card as the paymen ...

javascriptphphtml

How can I capture a screenshot of the div displaying pictures uploaded by the user on the frontend?

Take a look at this code snippet. It allows users to upload images, move them around, resize, and rotate them once uploaded. $(function() { var inputLocalFont = $("#user_file"); inputLocalFont.change(previewImages); function previewImages() { ...

javascriptphpjquerycssjquery-plugins

Automatically close one option upon opening another

Displayed below is the HTML code that I have printed with echo: <input id="58" readonly="readonly" class="cell_to_edit" value="Accepted"> <span id="58" class="toggle_status"> <select class="status_change"> <option>Ac ...

javascriptphpjqueryhtmlajax

Switching classes in real time with JavaScript

I'm struggling to understand how to toggle a class based on the anchor text that is clicked. <div> <a id="Menu1" href="#">Menu</a> <div id="subMenu1" class="subLevel"> <p>stuff</p> </div> <div> <a i ...

javascriptjqueryhtmlcss

Top method for identifying "abandoned words" within text that has been wrapped

Our content and design teams have a specific request to prevent paragraphs from ending with an "orphan word" - a single word on the last line of text that has wrapped onto multiple lines. The designer's proposed solution is to adjust the margins sligh ...

javascripthtmlcssreactjs

Creating UL tabs using just HTML and CSSHere's a step-by-step guide

Looking for help to accomplish this task. I already have the styling, but I want something to happen when I click on the tabs. Specifically, I want the div with the tab class names to show and hide upon clicking the tabs. Currently, nothing happens when I ...

htmlcsstabshtml-lists