Editing Roadster For Sale Page – Grid Cards

How to Change the Font Size and Icon Size for Specific Elements #

1. Locate the CSS Code #

You will find the CSS code within the <style> tags in the code snippet we provided. This CSS controls the appearance of the Roadster listing cards.

2. Adjusting the Location Font Size #

Selector:

Instructions:

• Find the .ea-tesla-location CSS rule.
• Change font-size: var(--card-body-font-size); to a different value. For example:
  css

  Copy code

  .ea-tesla-location {
font-size: 1rem; /* Adjust value as needed */
}

• A value like 1rem or 14px can be used if you prefer a static size.

3. Adjusting the Mileage, Color, and VIN Text Size #

Selector for all details:

Instructions:

• Find the .ea-tesla-details li CSS rule.
• Change font-size: var(--card-body-font-size); to your desired size. For example:
  css

  Copy code

  .ea-tesla-details li {
font-size: 0.95rem; /* Adjust value as needed */
}

• This will affect the text for Mileage, Color, and VIN fields equally.

4. Adjusting the Mileage, Color, and VIN Icon Size #

Selector for the icons within details:

Instructions:

• Find the .ea-tesla-details li img rule in the CSS.
• To change the icon size, increase or decrease the width and height. For example:
  css

  Copy code

  .ea-tesla-details li img {
width: 20px;
height: 20px;
}

• Keep the width and height the same for a uniform, proportional icon display.

5. Adjusting the Price Text Size #

Selector:

Instructions:

• Find the .ea-tesla-price CSS rule.
• Change font-size: var(--card-price-font-size); to a fixed size like 1.2rem or 18px as needed:
  css

  Copy code

  .ea-tesla-price {
font-size: 1.2rem; /* Adjust value as needed */
}


6. Using CSS Variables vs. Fixed Sizes #

• You may notice var(--card-body-font-size) and var(--card-price-font-size) used. These are CSS variables defined at the top of the style block.
• If you prefer to maintain a global size control, adjust these variables at the :root level. For example:
  css

  Copy code

  :root {
--card-body-font-size: 0.9rem; /* change to 1rem, etc. */
--card-price-font-size: 1.1rem; /* change to 1.2rem, etc. */
}

• Changing these variables updates all elements that use them, providing a more consistent scaling.

7. Save and Refresh #

After making your changes in the CSS:

• Save the file or snippet.
• Refresh the webpage to see your updated sizes.

If you still see the old sizes, clear your browser cache or ensure that the code is loading after any Elementor or theme default styles.