AMP causing distortion in images

My images are stretching on this page and I cannot figure out the cause. Any help would be greatly appreciated.

The issue seemed to arise after I implemented Bootstrap, but I am using a customized version of Bootstrap that only includes grid system and form control stylings, so there shouldn't be a conflict.

https://codepen.io/Mortiferr/pen/MBNqxO

.text-centered {
    text-align: center;
}
.sku {
    color: gray;
}
.margin-minus-1 {
    margin-top: -1em;
}
.wrapper-link {
    text-decoration: none;
    color: inherit;
}
.wrapper-link:visited {
    text-decoration: none;
    color: inherit;
}
.wrapper-link:hover {
    text-decoration: none;
    color: inherit;
}
.product {
    border: 1px solid #DDDDDD;
    border-radius: 1%;
    margin-bottom: 1em;
}
.hamburger {
    font-size: 1.5em;
    padding: 0.1em 0 0.2em 0.3em;
    display: inline;
}
.headerbar {
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
}
.site-name--container {
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.site-name {
    width: 10em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}
.sidebar {
    padding: 2em;
    margin: 0;
}
.sidebar > li {
    list-style: none;
    margin-bottom: 10px;
}
.sidebar a {
    text-decoration: none;
}
.close-sidebar {
    font-size: 1.5em;
    padding-left: 1em;
    padding-top: 1em;
}
.get-price {
    padding-bottom: 1em;
}
.get-price-link {
    text-decoration: none;
    padding: 5px 15px;
    border: 1px solid #D83B34;
    color: white;
    background-color: #D83B34;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.get-price-link:hover {
    text-decoration: none;
    padding: 5px 15px;
    border: 1px solid #D83B34;
    color: #D83B34;
    background-color: white;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
}
body {
    font-family: 'Open Sans', sans-serif;
}
.app-container {
    margin: 1em;
}

This is the extent of my CSS knowledge, and I'm unsure why this issue is happening. Could it be related to Bootstrap?

cssvue.jsamp-html

Answer №1

Your JavaScript code seems to be causing the issue with the images by surrounding them with delete tags. Deleting it and manually coding the image src into the amp-img tag should fix the scaling problem, as long as you replace the dimensions with 408x287, matching the placeholder image. It's possible that there is a conflict between Vue and v0.js.

Additionally, if you are aware that JavaScript is not allowed in AMP, make sure to remove the tags around your Vue code. You can utilize amp-list for the image URL just like you did for the description information beneath the images to fully automate the product listing.

After testing your code in the AMP Playground, it appears that there are several errors due to the Vue framework and other factors.

https://i.sstatic.net/wKi6C.png

Answer №2

Can you please review this proposed solution and confirm if it meets your needs? Here is the code snippet that should be added to your CSS file:

.i-amphtml-layout-size-defined .i-amphtml-fill-content {
    position: relative;
    height: auto;
    width: 100%;
    max-width: 100%;
}

i-amphtml-sizer{
   padding: 0% !important;
}

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

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Can the <v-toolbar-title> be fixed within a <v-navigation-drawer>? <v-card class="d-inline-block elevation-12"> <v-navigation-drawer hide-overlay permanent stateless height="440" value="true"> <v-toolbar color="whi ...

javascriptcssvue.jsvuetify.js

Having difficulty arranging two <p> or <div> elements in a stacked position within the footer

https://i.sstatic.net/7MTbK.png I've been experimenting with different methods to stack the smaller "test" text under the bigger TestTest. It seems to work fine on the rest of the page when I use a separate div, but for some reason, it's not wor ...

htmlcss

Using the jquery plugin Sidr in Rails: A complete guide

I've been attempting to integrate the jQuery sidr plugin into my Rails project on Codecademy, but unfortunately, it's not functioning as expected. To view the page, simply click here: If you notice, the menu icon at the top left takes some time ...

javascriptjqueryhtmlcssruby-on-rails

Steps for submitting a form using Bootstrap 4

Hi there! I'm struggling to get this form to function properly by sending data to my email address. I have included bootstrap.js, bootstrapjquery.js, and popper.js in my setup. I was hoping to find a solution within this code snippet that allows the ...

javascriptjqueryhtmlcssbootstrap-4

Positioning elements using CSS Flexbox within the body of a modal dialog box

Hey there! I'm trying to achieve a specific style using flexbox, but I'm having trouble with placing the modal close button on top of the image. If anyone has any tips or guidance, I would greatly appreciate it! Here's what I have so far: ht ...

cssreactjsflexboxmodal-dialog

Get the docx file generated with Flask and VueJS

I've been grappling with the challenge of downloading a docx file in VueJS. Initially, I attempted to generate the file on the frontend, but it kept getting corrupted. To solve this issue, I resorted to using Flask to create the docx file, which worke ...

javascriptpythonvue.jsflask

concise stylus CSS selector

Is there a way to condense these stylus selectors for a cleaner look? #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(1) > button #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > ...

csscss-selectorsstylus

Solution for repairing the display location button on Android within a React Native Map

I am facing an issue with the Location Button in my React Native Maps app. When the app is opened for the first time and the map is rendered, the button disappears. However, if I close the app but leave it running in the background, upon reopening the app, ...

javascriptcssreactjsreact-nativereact-native-maps

Unable to display Vue image within v-for loop

I'm facing an issue with rendering images from an array of objects. Even though the paths to the images are correct, the images are not displaying. I've been following a tutorial at which suggests specifying the image URLs as links. I've t ...

javascriptlistvue.jsrendering

Paths of least resistance: Absolute URLs for assets in CSS

What could be causing the absolute path for this asset (the font) not to work while the relative path does? <body> hello friend </body> <style type="text/css"> @font-face { font-family: 'Gilroy'; /* src: ur ...

cssreactjs

Guide on how to align h1 in the navigation bar

I've been attempting to center text on a nav bar but haven't been successful. What could I be overlooking? // include external modules import React, { Component } from "react"; import { Navbar } from "reactstrap"; import { Menu } from " ...

javascripthtmlcssreactjs

What is the method to close the picker when using type="datetime-local"?

Currently, I am utilizing Vue with the "datetime-local" type for input. While I can successfully select the date and time, my goal is to have the picker close automatically after a selection has been made. I've experimented with adding an onchange ev ...

javascripthtmlvue.js

Troubleshooting a Navigation Styling Issue in HTML and CSS

I'm struggling to position my drop-down menus correctly in my WordPress theme navigation. They are appearing far away from the nav bar and end up near the top left corner of the screen when I hover over a ul li >. Here is the CSS code I am using: ...

htmlcsswordpressthemes

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

javascriptcsstwitter-bootstrap-3drop-down-menuanchor

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

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

javascripthtmlnode.jsvue.js

Trigger the change of an element upon hovering over another element

Is there a way to manipulate an element when another element is being hovered over, with the two elements structured like this: <div id="parent_element"> <div id="class-open-1"></div> <div id="class-close-1"></div> < ...

javascripthtmlcss

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...

htmlcss

What is the process for customizing the arrow of a <select> dropdown menu exclusively?

Here is the code for a dropdown menu: <select id="dropdown"> <option value="">Go to page...</option> <option value="http://stackoverflow.com">CSS-Tricks</option> <option valu ...

javascriptjquerycssxhtml

Retrieve the value of the following object in a loop - Vue JS

I needed to verify whether a specific property of an object matches the property of the next object in an array of objects while looping through using a v-for loop. Here's an example JSON object: [ { Date: '21-July-2017', ...}, { Date: ...

vue.jsvuejs2v-for

The process of ensuring an element is ready for interaction in Selenium with Javascript

I am currently working on creating an automated test for a Single Page Application built with VueJs. When I click on the registration button, a form is loaded onto the page with various elements. However, since the elements are loaded dynamically, they are ...

javascriptseleniumvue.js