how to make an image with text full-width dawn Shopify [works for all themes]

today I will share with you how to make the image full width just follow those easy steps

you need to find the element id of the image you want to edit his size

How To Find Image Id :

Most browsers come with an inspector tool built in that allows you to view a specific element within the webpage’s HTML. If you have a browser such as Chrome, Firefox, or Safari, Inspect element is available from the context menu when you right-click on the webpage (shown here in Chrome).

image_5.png

To find the HTML ID or Name for a specific element you can:

  1. Right-click on the element.
  2. Click on Inspect within the popup menu.
  3. A preview window will popup highlighting the webpage’s HTML. There you’ll be able to find the HTML ID or Name for that element.
find element id on shopify theme

Copy the id of the image and post it in the note

1- Go to the online store > Theme >Edit Code

change menu on shopfiy store

2- Assets >base. css

add CSS code to shopify store

3 – Add code at the bottom.

@media screen and (min-width: 768px) {
div.image-with-text {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}
}

change this div.image-with-text with your id you already copy and click Save

Leave a Comment