Skip to main content

Multiple Questions - Two Icons Alignment, the column, and many more！

Janet Wong

Hi, 

First question - how can I align two icons boxes inline like the example: https://www.counselling-directory.org.uk/events.html

 

2. We have this background colour ( made by a column) behind the text on the desktop page. However, in the mobile view, the size has been distorted due to space. How can I adjust in the way (in mobile) that two lines of text are being highlighted? 


3. On the home page, I have this section, but when it switches to the mobile page, can I have the slider mode that allows me to view the box separately instead of showing them all. 


4. how can we change the translatepress font type? On the translated page, we have the custom font (confidente regular) and it is not marked as an Heading or Paragraph and it turned into a weird font in the translated page. How can we change the font type to the original setup? Translatepress is really a hard tool to deal with...

0

Comments

32 comments

Date Votes
  • Ariel H.

    Hi Janet,  

    Thank you for reaching out to us.  

    1. Unfortunately, aligning two icon boxes horizontally isn’t directly possible. To achieve this, create a row with two columns and place one icon box in each column.  

    2. Regarding your second question, if you want the text highlight to match the text length, try this approach and see if it resolves the issue.  

    3. For your third question, you’ll need to create two versions of the block: one for desktop, where elements are displayed in columns, and another for mobile, where the block is converted into a slider. Then, hide the mobile block on desktop and vice versa by setting appropriate visibility settings.  

    4.  TranslatePress doesn’t change font types—it’s likely a caching issue causing the fonts to display incorrectly. Please try purging your cache plugin and clearing your browser cache, then reload the page to restore the original font.

    Let me know if you need further clarification!  

    Best regards,  
    Ariel H.

    0
  • Janet Wong

    2. Regarding your second question, if you want the text highlight to match the text length, try this approach and see if it resolves the issue.  

    But I only need half of the highlight (Like whats shown) , instead of full highlight. Also if I turn into translated page, the highlight no longer fits/applies properly to the translated text due to the text length and we are not allowed to change the highlight  

    0
  • Ariel H.

    Hi Janet,  

    Thank you for the update.  

    Unfortunately, in Brizy, highlighting text applies the highlight to the full height of the text.  

    Best regards,  
    Ariel H.  

    0
  • Janet Wong

    Also the highlight for english text is just good but in the translated language it becomes excessive 



    how could you solve it 

     

    0
  • Janet Wong

    how do you add the see more options when you click on it, the text will expand. 

    0
  • Janet Wong

    Also I noticed that when we switched to mobile/tablet view, the full width does not display properly 

    0
  • Janet Wong
    • Edited

    Also two things I want to achieve in mobile

    1. I want to add the floating icon to scroll to top on each mobile page. how would you do 

     

    2. I want to add the see more excerpt so they can click to expand the text in mobile. 

     

    0
  • Ariel H.

    Hi Janet,  

    1. Regarding the highlighted text, could you please provide the URL so we can inspect it? Additionally, include the URL of the page where the full-width layout isn’t displaying properly.  

    2. For adding a scroll-to-top button, check if your theme includes this feature. If not, you can install one of the plugins from this list: https://blog.hubspot.com/website/wordpress-scroll-to-top-plugins and see which one works best for your site.  

    3. By default, the Brizy excerpt is visible, and there isn’t an option to break the excerpt and expand it to view more. However, you can use the accordion element to display the excerpt. In this case, the excerpt won’t be visible on the page unless the accordion is expanded to reveal the rest of the text.  

    Best regards,  
    Ariel H. 

    0
  • Janet Wong
    • Edited

    1. I just sent the details to community@email. You can find the details under services page, and the full-width layout  happened to all pages ( i used the template within brizy and the mobile does not work well)  Its on single and premarriage page

     

    2. how to check the theme if I've got the scroll up to the top/

     

    3. it will be more like this function - can this be faciliated using accordian if i wanted to display some of the text like example below

    0
  • Janet Wong

    hi also for some reasons, the menu hamburger is not showing up on the mobile version after redirecting from pages to pages. The first landed page is okay but afterwards, the menu icon didnt show up 

    0
  • Ariel H.

    Hi Janet,  

    1. About the highlighted font, it seems like a column was added beneath the text with a fixed length. This might not work well because the translated text may not match the length of the original English text. I’d recommend using Brizy’s default text highlighting feature, so the highlight adjusts automatically to the text length.  

    2. The footer bar seems to be working fine on my end. Could you let me know the steps to reproduce the issue you’re experiencing?  

    3. You can create the effect you’re looking for using the accordion element. Just center the text, increase the font size, and remove the borders to achieve the look you want.  

    4. Regarding the back-to-top button, it looks like your current theme doesn’t include this feature. Typically, it can be found under Appearance → Customize if the theme supports it. If you’d like to stick with your current theme, you can install a plugin to add this functionality. Or you could consider switching to a theme that includes this feature, like Astra: https://wpastra.com/docs/scroll-to-top/.  

    Best regards,  
    Ariel H. 

    0
  • Janet Wong

    3. Does that mean I will need to create two differents layout in desktop and mobile  and for desktop i can display full whereby the mobile i can use teh accordion? 

    4. If I change to Astra, will the existing customised code, and settings be gone? 

    0
  • Janet Wong

    Also about the menu issue, it seems to all disappear on the desktop and also in the background. What happened? 

    0
  • Ariel H.
    • Edited

    Hi Janet,

    1. Yes, that's the idea. If you are working in a posts element or static excerpt section. You can show the regular excerpt text block only in desktop and tablet and only make the accordion element visible in mobile.

    2. When switching themes, be sure to copy the custom CSS from Appearance → Customize → Additional CSS in your current theme. Then, after switching to Astra, paste it into the same section to retain your customizations.

    3. Regarding the missing global headers, I may have reset them while inspecting your site, sorry about that. To restore them, access the saved global block, drag it back onto the page, and set the display conditions to "All."

    If you have any further questions, feel free to reply.

    Best regards,
    Ariel H.

    0
  • Janet Wong

    Hey our site needs to go live next week - could you please help us on this and also the menu not being shown up please

    0
  • Ariel H.

    Hi Janet, the menu bar is now visible:

    0
  • Janet Wong

    Yea I fixed it 

    0
  • Janet Wong

    Hey there are some issues on the mobile menu. The first loading of the site will have the menu fine but after switching from side to side, the menu disappear. Can you get into the site and check? 

     

    Also the site suddenly got a test on the menu 

    0
  • Janet Wong

    The menu went disappear again 

     

    0
  • Ariel H.

    Hi Janet, the menu is working at my end, please try using another browser - https://youtu.be/gjh434kIcQ0

    0
  • Janet Wong

     

    The same issue replicated from the hosting provider 

    0
  • Ariel H.

    Hi Janet, to further troubleshoot the issue could you please temporarily remove all the costum CSS and see if it makes any difference?

    0
  • Janet Wong
    • Edited

    Removed all the custom css in teh customiser, and it worked. Thanks for that. 

     

    However, it generates the new question about the absolute diagram being displayed incorrectly on the mobile view. 

    This is hwo the arrows supposed to be laid out. 



    If I switched to mobile view in chinese version, I will receive the following 

     

    this issue does not persist in mobile view in english version 




    I cant edit in the chinese translated version that being said. Can you please help 

    0
  • Ariel H.

    Hi Janet,  

    Could you please try deleting the arrows and rebuilding them to see if this resolves the issue? It seems there may be an issue with the absolute positioning in the mobile view, and rebuilding them could potentially help fix this.  

    Best regards,  
    Ariel H.

    0
  • Janet Wong

    Meanwhile, on our coaching page, it only highlights parent-child button on the start. 

     

    Can we make it white in the background so none of them stands out 

     

    0
  • Ariel H.

    Hi Janet,  

    The layout was a bit challenging, so we removed it and re-added the button. I’ve saved it as a block, and you can retrieve it from your saved blocks.  

    Best regards,  
    Ariel H.

    0
  • Janet Wong

    Thanks that works 

    Another question Ariel, 

    On the mobile version of the Workshop and Event page, we tried to adjust the margin and spacing to make the journey of finding true text down to premarriage. I tried to put a spacing but that will affect the overall look 

     

     

     

    0
  • Ariel H.

    Hi Janet,

    We’ve added an icon box as a workaround, which won’t affect the overall design. It’s set to be invisible on both desktop and tablet views.

    You’ve done an excellent job with this website!

    Best regards,  
    Ariel H.  

    0
  • Janet Wong

    thanks Ariel, how can you make the text hover in colour and not with the underline?

    0
  • Ariel H.

    Hi Janet, could you let me know which page you’re experiencing this issue with?

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

Ask a Question