Hi tagdiv,
I am trying to customize my post template using https://cloud.tagdiv.com/what-happens-when-your-carryon-is-over-the-limit/? as the base but am having some difficulties.
Eg. Author Photo – Author Name – Views – Comments – May I know how do you create the content in a row as shown in the link? I know how to create a inner row but have failed to put the content all in a row. Do u have a tutorial where I can learn how to?
Thank you,
Jasmine
Hi,
The elements aren’t in a single row, the content is created in more rows and columns.
For comments and views to top on the post you can add with tagDiv Composer, also the author box where is photo, name, description and socials you can add with tagDiv Composer, this is a video what can helps you => http://www.filedropper.com/c244e1f7-3c61-4750-8630-12e9a3bb0c69 The photo for the author, name and description need set in WordPress -> Users -> Profile => https://www.screencast.com/t/3OHZf3e9q6RY
For customizing the sidebar you can take a look on this video => https://www.youtube.com/watch?v=fa7GenCHcBU
Hope this helps you!
Thank you!
Hi Anamaria,
Sorry, I think I wasn’t clear enough with my query. I am aware of the different elements and how I can use them. But I am having difficulties trying to align them.
1. Eg. author name , date, views, social share icons – when I split the rows into 4 columns and insert each element, the elements are far apart and i can’t try to get them together as shown in https://cloud.tagdiv.com/what-happens-when-your-carryon-is-over-the-limit/.
2. I would like to show all my categories and tags align in a row. Sometimes there might be 2 categories, sometimes there might be 5 categories. How should I align them and also make sure that they do not overlap each other in the frontend?
Thank you,
Jasmine
Hi,
1. Sorry, but I think that you didn’t check the video provide in the last reply.
Eg. author name, date, views, social share icons need to be set in the same column if you want to be displayed like in our demo. Please check my screen record again, and provide some screenshots if your results.
2. Provide some screenshots of how you want it to look.
Thank you!
Hi Anamaria,
1. My bad. I just watched the video. So it seems that not all elements can be displayed inline – tried to put social share icons on the far right hand side of the date and had difficulties trying to align it – had to use -50 top margin and the result is that it is not responsive on mobile.
2. I am trying to place categories and tags on the same line. Got it working in desktop but not in mobile so was wondering if u have a better solution than mine.
Am unable to attach screenshots here so here’s the link to the post that I am trying to compose. http://tapa-global.hostinghunk.com/retailers-face-operational-logistical-hurdles-in-pandemic-driven-switch-to-ship-from-store/
Thank you,
Jasmine
Hi,
1. If you saw a cloud template as you like how it is structured, you can import that template. This is the easiest way to do it.
Not all elements have an option where you can check to be inline, but it can be set to be inline from the CSS tab (this is one all elements) => https://www.screencast.com/t/tNRCDXbG Also, the CSS tab settings can be adjusted per viewport => https://www.screencast.com/t/oFuTsvJMt3cM
2. I hope this video will help you => http://www.filedropper.com/8ea8bc9c-9df2-43cb-93c6-31d8a0790581
Thank you!
Hi Anamaria,
That was sooooo helpful! I will try it out.
Also, is there a css to display 2 elements in a single row in mobile? Eg. The team member element and the icon box element always display one per row in mobile. And I would like to display 2 in a single row instead.
Thank you,
Jasmine
Hello,
This you can achieve without custom CSS, you need to add a row -> inner row set the layout to 1/2+1/2 and you can add the team members and the icon box in the inner-column and set for each the width to 50% and the elements from CSS put to display inline-block.
I hope this video helps you => https://we.tl/t-ARZZwfJ81C
Thank you!
Hi Anamaria,
That helps a lot. Thank u again!
I was trying to fix the icon box and prefer the icon below the title. Here’s a sample of what I did: http://tapa-global.hostinghunk.com/guarding-security-requirements-gsr/
The size, spacing, icon vertical, icon horizontal values etc. were set using a 1366px screen. However, I couldn’t get it to be responsive esp. for 1024px onwards. So I am wondering if I did anything wrong?
Thank you,
Jasmine
Hi Anamaria,
I have imported a cloud template and tried to tweak a little. Tried ur method to align the categories and tags on a single row using the inline method but failed for both desktop and mobile view.
Unlike shown in your video, when I added the categories, it appeared center-align and I couldn’t make it left-aligned unless I add -140 margin on the left. And making the element ‘inline’ didn’t work as well.
Here’s the page that I tried it on: http://tapa-global.hostinghunk.com/zuellig-pharma-hong-kong-demonstrates-supply-chain-excellence-in-the-pharmaceutical-industry-by-achieving-tapa-tsr-certification-with-sgs/
Please let me know how I can solve this issue.
Thank you,
Jasmine
Hello,
Normally, using our theme it will provide a responsive version for small screen device, therefore there isn’t a fixed code (for example 650px width set on the element), then this should be responsive.
Please let me know the steps you did to set the categories and tags inline, provide some screenshots or video this will help me to see what is not set correctly.
Thank you!
