Editing Image and Copy width

SOLVE
Highlighted
Occasional Contributor

 

Hi,

 

I am working off of a purchased email template which is saved as "Native Newsltter". For this newsletter we only have images available that are a width of 510 px - I have tried a few different solutions but am unable to get the copy underneath the listing images to line up and be 510 wide. I tried assigning a class name with max-width: 510px and a few other methods. Any ideas on the best way to line up an image and copy with the same width of 510px?

 

Thanks!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Esteemed Advisor | Partner

@sconner91 Hubspots image module will often set the height and width of an image as inline css. This should be editable from the image module.

 

You can use the developers console (ctr + shift + i on most browsers) . Go to a preview of the email (not the email editor) and open the developers console. On chrome their is an element selector on the top right of the developers console. Clicking this will allow you to select elements on the page. Select the image. The html and css in the console will focus on the html and css fo the element you selected. First check the image tag for inline height and width. if none then check the css for hieght and width settings. If none then it is possible that you are setting it incorrectly. 

 

Your creating an email so there will not be a style sheet as everything is styled inline. Browsers read web pages from top to bottom so if your inline styling comes before a height and width attribute inside the img tag (<img src="" height="100px" width="100px">) your styling will be overwritten by these attributes. 

 

I should stress that the best solution is to attempt to adjust the dimensions using controls in the module, however if it is not working you could try using !important in your inline styling. !important causes a css style to take priority so it is not overwritten by any styling of the same type further down the page. it would look like:

width: 510px !important; height: auto !important;

inside your inline styling. 

 

A better but more technically advanced option would involve creating the image module in HubL, exporting it to template context, and calling it into the template using a data token. This would allow you to access only the src and alt of the image allowing you full control over the styling with no interference from default styling. 

 

Another option that may be less desirable is to use the image as a background image. you would set the background-size to cover and maybe the position to center center. This would allow the image to fill it's container 100% but may cause the image to crop on the sides or the top and bottom depending on if there is enough space for the full image.

 

Often times when having trouble changing the width of an element it turns out that the parent element (it's container) is what is constraining it so you should check that there isn't an issue with the container before going too crazy. 

- Jonathan Sumner
Reply
0 Upvotes
1 Reply 1
Esteemed Advisor | Partner

@sconner91 Hubspots image module will often set the height and width of an image as inline css. This should be editable from the image module.

 

You can use the developers console (ctr + shift + i on most browsers) . Go to a preview of the email (not the email editor) and open the developers console. On chrome their is an element selector on the top right of the developers console. Clicking this will allow you to select elements on the page. Select the image. The html and css in the console will focus on the html and css fo the element you selected. First check the image tag for inline height and width. if none then check the css for hieght and width settings. If none then it is possible that you are setting it incorrectly. 

 

Your creating an email so there will not be a style sheet as everything is styled inline. Browsers read web pages from top to bottom so if your inline styling comes before a height and width attribute inside the img tag (<img src="" height="100px" width="100px">) your styling will be overwritten by these attributes. 

 

I should stress that the best solution is to attempt to adjust the dimensions using controls in the module, however if it is not working you could try using !important in your inline styling. !important causes a css style to take priority so it is not overwritten by any styling of the same type further down the page. it would look like:

width: 510px !important; height: auto !important;

inside your inline styling. 

 

A better but more technically advanced option would involve creating the image module in HubL, exporting it to template context, and calling it into the template using a data token. This would allow you to access only the src and alt of the image allowing you full control over the styling with no interference from default styling. 

 

Another option that may be less desirable is to use the image as a background image. you would set the background-size to cover and maybe the position to center center. This would allow the image to fill it's container 100% but may cause the image to crop on the sides or the top and bottom depending on if there is enough space for the full image.

 

Often times when having trouble changing the width of an element it turns out that the parent element (it's container) is what is constraining it so you should check that there isn't an issue with the container before going too crazy. 

- Jonathan Sumner
Reply
0 Upvotes