Hello,
I am currently seeking advice on how to skip a line in the title of the circle icon widget. I only need to do this for one of them as it does not align with the rest as they all have two lines of text in the title.
The other issue I have is that every time I enter a site, the header images change size, so for a second the images will cover most of the screen and then go back to the way it should look. I speculate that this happens because they first show the original image size and stretch out due to my settings. Is there anything I can do that would not require me to resize the images? (I edited them to have text on them and it was very time consuming to find the right font size etc)
And lastly, what would the css be to remove empty space between a circle icon widget and a button? I think this would be site settings and not row/widget settings, as I removed the ‘link to more’ text under and placed a custom button instead, I’d just like them to appear closer together. Thank you so much for everything! Vantage is wonderful! (the site is not live therefore I cannot provide a link)
Hi Alexkonie
Thanks for your input in the other thread.
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Thanks
Magus
Hi Magus,
Thank you for your reply. Unfortunately, I’m working on the website on a local server and it is not live. Perhaps, if you let me know which parts you would like to see I could send pictures? A little update – I was able to somewhat fix the issue of spacing under the circle icon widget (Question 3), I changed the setting from the icon appearing on top to bottom.
Kind regards,
Alex
Hi Alex
Unfortunately, due to the way PageBuilder tags it’s elements there is no clear way to advise from screenshots of the page without more information. If you follow this you should be able to determine the necessary tags that need targeting to achieve what you want with the circle icon.
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
When you have found the tags please link a screenshot of the elements in the code window and one of the page as it appears now. I’ll try and advise from that.
The images should not preload in a smaller size at all. It is possible this could be caused by a caching plugin or by the cache in your web browser. Please try clearing any caching plugins you are using and your browser cache and see if this fixes the issue.
Magus
Hi Magus,
I followed the link you provided me with. Very impressive feature, it was very helpful but I think I am still doing something wrong. I could identify the area that needed changing and after inputting the the necessary code into custom css, all the circle icon widgets were affected, even though the code specified H4 (Like I mentioned before, only 1 circle icon widget needs changing)
Also, when attempting to edit the circle icon widgets on another page, inputting the css code did not affect them at all.
media="all" #pg-5-0, #pg-5-2, #pl-5 .panel-grid-cell .so-panel { margin-bottom: 30px; }When I tried to untick the box in google chrome developer, for the specific visual css, it appeared just like I want it to be, but I believe it’s not that simple and I need to put it in custom css… What am I doing wrong?
If you would like to have a look at the screenshots of the two issues, I could send them to you right away.
Thanks,
Alex
Hi Alex
If it appeared correctly when you untick the controlling style then it means that your CSS is being used but is getting Overridden. To overcome this you will need to use the ‘!important’ attribute changing your code to be
#pg-5-0, #pg-5-2, #pl-5 .panel-grid-cell .so-panel { margin-bottom: 30px !important; }This attribute will tell the CSS that it has the higher priority so should be used.
Magus
Hi Magus, thanks for your reply. I’m starting to think the issue is in my custom CSS, perhaps I placed conflicting codes (?) because the !important attribute does not make changes. Here is what all I have in my custom css regarding the spacing and circle icons, hopefully you’ll be able to spot out what the issue is
/*remove text under circle icon widget*/ body.page-id-9 .widget_circleicon-widget .circle-icon-box a.more-button{ display:none; } #main { padding-top: 0px !important; padding-bottom: 0px !important; } /*remove text under circle icon widget*/ body.page-id-5 .widget_circleicon-widget .circle-icon-box a.more-button{ display:none; } .main-navigation ul ul a { padding: 15px 15px !important; } .widget_circleicon-widget .circle-icon-box p.text { color: #5e5e5e !important; font-size: 14px !important; } /*line spacing*/ .post p{ line-height: 1.9em; }Nevermind! It worked perfectly. Just needed to start over and refresh, seemed to do the trick. Any advice on the second issue of customising only one circle icon widget? I’m still unable to edit just one out of four. Here is the code that I’m using without success.
.widget_circleicon-widget .circle-icon-box h4 { margin-bottom: 1.1em !important; }Hi Alex
The above would affect all circle icons as they all share those attributes. When you inspect the page please examine the lines above. You should see something like this
This will give you the ID of the containing cell, in this case
you would need to target your CSS to the Cell ID rather than to the class, making your CSS
#panel-176-0-0-0 .circle-icon-box h4 { margin-bottom: 1.1em !important; }Magus
Hi Magus,
That’s it! I can’t thank you enough. You make such a great support team. Hope you all the best.
Alexandra
Hi Alexandra
You are welcome. If you need any more help please feel free to open a new support thread.
Magus