I used css to set up my text on the webpage right under the heading. It looks great on a laptop and it looks great on mobile and tablets portiat but it looks horrible on landscape. How can i set my text up to be responsive no matter what im doing?
Hi @mhannor,
Thanks for reaching out.
The issue is the number of columns you set on tablet. Since tablet landscape has the same resolution as laptop, you would need to switch to a laptop breakpoint and set it to a single column. Please check this screenshot.
It’s a setting of your row, and it’s currently set to two columns.
Thanks!
Thanks that helps a lot. Last question, on the homepage, in the middle, i’m using the icons element, how do I center those on any device. It’s not centered at all. I also notice these are not all of the font awesome icons, do I need to do an update or something to get the icons?
Also I’m trying to use the creative column three from your design cloud, i see it in my template manager but i don’t see how to place it in my website so that I can customize it. I looked in the content preset area, i don’t see it. How do I import it into my website Please advise.
Hello Marshae,
Thanks for updating in!
This is what I am seeing in smaller screens:
To make sure that the elements stay at the center of the column, please enable the Flexbox option in the column settings. You can then align both horizontal and vertical to the “Center”.
To learn more about the Flexbox option, please check this out:
When you import a Content Template, you will have to insert or load it to your page as a template. Please check out this documentation for further explanation:
Thanks. I figure out what I needed. But can you address the question about font awesome icons, they are not all in your library for icons? Also, on my cellphone, the columns are overlapping in text but in pro it looks fine. Can you tell me what I need to do to fix this on cellphones, i have tried different browsers in its all the same, why doesn’t it look like the pro editor for phones? How can I get the text to not overlap without effecting how it looks on the other layouts?
Pro Editor
My Phone
Hello Marshae,
The icons were overlapping the text in smaller screens because there is not enough space already. I can see that you have added this custom CSS:
.interactive-column .icon {
position: absolute;
right: 40px;
top: 20px;
transform: translateY(20px);
}
This CSS will be applied across all screen sizes and the size of the icon and its position did not change. You can make use of the @media CSS property and then reduce the font size and position of the icon in smaller screens like this one:
This layout requires using another custom CSS:
@media(max-width: 480px){
.interactive-column .icon {
font-size: 3em;
right: 10px;
top: 40px;
}
}
Meanwhile, if you want it to just display a bigger icon on top like this;
You can simply update your custom css and make use of the @media CSS property that enables the CSS to only work in bigger screen sizes. And then for each icon element, you MUST set the left and right margins to auto.
@media(min-width: 767px){
.interactive-column .icon {
position: absolute;
right: 40px;
top: 20px;
transform: translateY(20px);
}
}
To learn more about the @media CSS property, please check this out:
We would love to know which one will work best for you. Thank you.
The first one was the easiest one to do, so I’ve implemented that. Thanks a million but alos I asked this question above, can you all shed light on font awesome icons
Hi Marshae,
Are you referring to the icons that are in the creative columns? If so, those are positioned through custom code. Please note that changing custom codes is outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.
Thanks for understanding. Take care!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.