Cargo Site Mobile Adjustment – Easy
When it comes to creating a unique and stunning website cargo works at its best. But Sometimes creating a website that also looks good on mobile can be a little bit challenging.
In this blog, we are going to cover how to do Cargo Site mobile adjustments using CSS
NOTE: In this blog, we’ll focus on explaining how to use the Cargo 2 editor. But you can still follow this blog. We’ll talk about Cargo 3 in a different blog.
Responsive text in Cargo 2
Step 1. Add text on the page
Log in to your Cargo Collective account and navigate to the Cargo 2 site you want to edit.
Go to the page and add the text. You can select any Text style. In the example below I have selected the H1 text. You can see that in the desktop version, the text looks good but when it comes to mobile the text appears too big.
Step 2. Add class to the text
Now you need to click on CODE VIEW at the bottom right corner it will open the code editor from there you have to add the class in the example below I have added the class mobileText to select that particular text. You can name the class of your choice it can be anything.
Step 3: Add CSS code
Now click on the Design tab and then go to the CSS Editor.
In the CSS editor, you need to add the media queries. In the media query, you need to select that class in our example we have used the class mobileText and you can give a particular font size like 15px. For mobile, the size of the font will become 15 px.
/*for mobile version*/
@media only screen and (max-width: 768px) {
h1 {
font-size: 3rem !important;
}
.mobileText{
font-size: 44px !important;
font-weight: bold !important;
}
}
Creating responsive images in Cargo 2
Now let’s see how to create responsive images in Cargo 2 using CSS, follow the steps below:
STEP 1: Upload images in Cargo 2
Access your Cargo 2 editor and upload the images. You can easily find the image name by hovering over the image thumbnail. Then, just drag the image into the Cargo editor.
STEP 2: Add CSS to images
Navigate to the ‘CODE VIEW’ option in the code editor to reveal the image name. Wrap the image between a div and assign a class, like ‘mainImg’ as shown in our example. Begin the <style> tag above and target that class to adjust the image width and height using CSS properties.
<style>
.mainImg img{
width:50% !important;
}
}
</style>
<div class="mainImg">{image 1}</div>
STEP 3: Adding media queries for images
<style>
/*for mobile version*/
@media only screen and (max-width: 768px) {
.mainImg img{
width:50% !important;
}
}
</style>
<div class="mainImg">{image 1}</div>Code explanation:
This code snippet is a CSS-style block targeting mobile devices with a maximum width of 768 pixels. Let’s break it down:
1. This part defines a media query targeting screens with a maximum width of 768 pixels, indicating that the styles within this block apply only to devices with screens smaller than or equal to 768 pixels wide.
<style>
/*for mobile version*/
@media only screen and (max-width: 768px) {
2. Here, we have a CSS rule targeting the class “mainImg” and its child images. It sets the width of the images inside elements with the “mainImg” class to 50% of their container’s width. The !important declaration ensures that this style takes precedence over any other conflicting styles.
.mainImg img {
width: 50% !important;
}
3. This HTML code represents a container div with the class “mainImg“. The {image 1} placeholder indicates where the actual image content would be inserted. This container is styled by the CSS rules defined above when viewed on devices with a screen width of 768 pixels or less.
<div class="mainImg">{image 1}</div>
I hope you have found this blog helpful. Thanks for reading🚀
If you have any questions or need help with your Cargo Site, feel free to ask in the discussion forum.
