Adjusting Image Sizes

Adjusting Image Sizes




Outline for Knowledge Base Tutorial: Adjusting Image and Column Sizing

Introduction

In this tutorial, we will walk you through how to adjust spacing and sizing for images and columns on your website. Whether you want to refine the appearance of your content or optimize it for different screen sizes, this guide will show you step-by-step methods to achieve your desired layout. You’ll also learn how to use the design tools effectively and tailor settings for mobile devices.

Tutorial Outline

Step 1: Identify the Problem Area

  • Review your layout to spot unnecessary blank spaces around images or columns.
  • Consider how the adjustments will affect both desktop and mobile views.

Step 2: Adjusting Image Sizing

  1. Access Image Settings:
    • Click on the image and navigate to the settings.
    • Open the Design tab and select Sizing.
  2. Modify Width:
    • Adjust the width slider to your preferred percentage (e.g., 69%).
    • Check how this adjustment appears on different screen sizes.
  3. Customize Mobile Settings:
    • Select the Phone Icon in the width section.
    • Set the width to 100% for mobile devices to ensure full responsiveness.

Step 3: Adjusting Column Structure

  1. Change Column Layout:
    • Update the column structure to redistribute space (e.g., smaller left column, larger right column).
    • This setup is ideal for layouts with text-heavy sections.
  2. Refine Column Spacing:
    • Go to Design > Sizing for the column.
    • Enable Custom Gutter Width and adjust the spacing to bring columns closer together if needed.

Step 4: Preview Across Screen Sizes

  • Use the responsive preview tool to see how your changes look on different devices (desktop, laptop, tablet, and mobile).
  • Adjust further if certain screen sizes still show unwanted spacing.

Step 5: Additional Options (Advanced)

  • For highly specific layouts, consider cropping or resizing the image itself to control dimensions precisely.

Conclusion

By following these steps, you can refine the spacing and sizing of your images and columns to create a polished, responsive design. Remember to test your changes across all screen sizes to ensure a consistent user experience. If you have further questions or need advanced assistance, feel free to reach out to us.



    • Related Articles

    • How to Create a Featured Image or Graphic with Canva

      1. Log into Tent Apps Website: Access the backend of your Tent Apps website. Navigate to the "Posts" section and select "Add New." 2. Prepare Post: Enter the necessary information for your post, including title and relevant details. Choose ...

    • Image Size Guidelines

      Images sizes are important to keep in mind with your new website & mobile app. Here are some guidelines to keep in mind. 1920px x 1080px 1920px width by 1080px height is the best size for your Website, TV Slides, Emails, Print Bulletins, Social ...

    • Keeping a Background Image from Cutting Off on Different Screen Sizes

      Do you have a background image that is getting cut off?  Learn more in this tutorial about the difference in a backbround image and using an image module to display an image. 

    • How to display your announcement slides on ProPresenter

      Never have to update your worship announcement slides or atrium TV slides again! Here is a quick tutorial on how to get your announcements that you have checked as "TV & ProPresenter" or "TV & Announcement Slides" to show with ProPresenter 5 & 6. ...

    • General overview of your Tent App Package

      Below is a general overview of various features of your Tent Apps Communication Package. #1 Making an Announcement Post Overview of How to Add an Announcement Input Title, Description Categories *This tells the system where your announcement should ...