Hey yall I'm using a real estate website editor called Real Geeks. They have a field to insert custom CSS and I just copy and paste code we have for round buttons. Problem is that occasionally the buttons will stack vertically as opposed to horizontally after an update.
<section class="three-widgets">
<ul class="small-block-grid-1 medium-block-grid-3 text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/plantationrealtygroup/home_page/Round_7001_Legare.png" alt="Advanced Search" width="300" height="300" /></a>
<h3>Advanced Search</h3>
<p>Find your perfect neighborhood</p>
</li>
<li><a title="Interactive Map Search" href="/map_search/results/wc5/#/?city=all&list_price_max=all&baths_min=all&beds_min=all&type=res&list_price_min=all&page=1&per_page=20&latitude_min=33.661507&longitude_min=-78.91471&latitude_max=33.708143&longitude_max=-78.84948"><img src="https://u.realgeeks.media/plantationrealtygroup/home_page/Push_Pin_Map.png" alt="Interactive Map Search" width="300" height="300" /></a>
<h3>Map Search</h3>
<p>Use our interactive map search tool</p>
</li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/" rel="noopener noreferrer"><img src="https://u.realgeeks.media/plantationrealtygroup/home_page/Round_152_Regency.png" alt="Home Value" width="300" height="300" /></a>
<h3>Home Valuation</h3>
<p>Get an INSTANT, accurate home valuation</p>
</li>
I'm not a code wizard (I don't code at all, only use Webflow) but even I can see that the code we're copying and pasting isn't using updated stuff like div boxes I typically use in Webflow. Any clue on how to make this work properly, what might be causing an issue, or rewriting the code to be cleaner/not mess up? I noticed there isn't much documentation on the custom code field anywhere on the Real Geeks support page either besides this.
Honestly I would appreciate insight onto why CSS UI elements from online libraries don't work on their custom code box. I reached out to support but got no useful answer.
Related
I try to create my portfolio with using GitHub Pages https://rageanalyst.github.io/Portfolio/. I use a template and alter him. I don't know HTML. I have a problem with caption when I open a frame with project. Two pictures don't underneath, they have (untitled). Only the last picture have caption and is the project tittle.
Problem: example
Q: How can I add caption to individual pictures in this frame?
This is extract of code when I have a single project:
<article class="col-6 col-12-xsmall work-item">
<a href="images/thumbs/trainings.JPG" class="image fit thumb"><img src="images/fulls/gym.jpg" alt="" />
</a>
<h3>Gym Tracker</h3>
<p>This project contains tables that allow me to track my progress in the gym. </p><br>
<ul class="actions">
<li>Full Project</li>
</ul>
</article>
Edit:
I still haven't solved the problem, anyone else can help me?
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
Hi I have a page that I am working on, which takes articles from a database. the results are split using php and show six articles per page. The problem i have is that if there are seven results and we roll into page 2, then everything thing is fine as can be seen under the timepieces menu button.
If however there are less than 6 articles and only one page the first article goes funny and the text drops below the image as can be seen under the private aviation button.
A link to the website is here : http://goo.gl/N8p8CT
Both items appear to be within the article.row.mid and so i am struggling to work out why.
Cause first article has image wrapped into <a></a> tag, but second article hasn't, these two images are rendered by different css rules.
and
first one is styled by botstrap.css rules, 2-nd is by your own stylesheet.
Anyway if you use bootstrap, then it's better to wrap image of article into a div for better alignment using bootstrap grid.
I'd do:
<article class="row mid">
<div class="col-xs-4">
<a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
<img src="admin/images/private_jet_hanger-1413201025.jpg" alt="post1" height="250px" width="250px">
</a>
</div>
<div class="col-xs-8 info"><a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
</a><h1>Jet Partner launches empty leg service...</h1>
<p class="details"></p>
<p class="tags"></p>
<p class="text">
</p><p>The advantages associated with private jet travel are invaluable: the ability to journey in comfort, security and privacy; to arrive at the airport just 15 minutes before take-off and to completely avoid check-in. Now, the advent of groundbreaking </p>
Read More <ul class="counters list-inline">
</ul>
</div>
</article>
Apologies if this is a really simple thing, I can't seem to get it. Think I need to use clear but it's not working right (or I'm not using it correctly).
Am doing a pretty simple page, floating one image logo left and text on right. Then using a line break to break up image / text (you can see example here: http://transitions-london.co.uk/index.php/testimonials
It looks fine on firefox, but move to safari or chrome and the formatting is shunting some images/text to the right. Also when you scale up or down (cmd +-) the formatting changes.
I think I need to use <div style="clear: both;"> after every <hr /> but when I do nothing happens and the Joomla editor removes the code after saving.
Each testimonials (chunk of logo then text) is currently coded like so:
<div style="float: left;"><img src="images/otherlogos/nationalgrid92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>"Transitions opens up an avenue for us to recruit a diverse graduate workforce. There's an option for recruiting to more experienced roles too. There's a real demand in the UK for highly skilled candidates in cables and tunnels and this presents a real alternative to find international people without the complexities around international recruitment. Some of these people may have experience in their home country that we just don't have here. If the requirements change quickly we can now respond quickly."</p>
<h5 style="text-align: right;">Sharon Goymer, Graduate Resourcing Manager, Development Programmes, National Grid</h5>
<hr />
<div style="float: left;"><img src="images/otherlogos/crossrail92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>“We gained a first-class civil engineer employee as a result of Transitions. The internship and recruitment service and candidate was above our expectations.. The refugee community offers a good untapped market.“</p>
<p> </p>
<p> </p>
<h5 style="text-align: right;">Dawn Barker, Crossrail Head of HR, Crossrail</h5>
<hr />
Would really appreciate the help. I know it's probably very simple.
Cheers, N
Your template already has a class clr you can use. Try adding it to your <hr> element like so:
<hr class="clr">
If that continues to be stripped out by the Joomla WYSIWYG Editor, then add this to one of your Joomla CSS files
hr {clear: both}
I've earlier heard that Firefox has a major problem with links wrapping around block elements, and it did recently give me some problems.
It is sometimes (maybe with a 20% rate), for some reason, changing this code (note that all the elements are defined as block elements in my stylesheet):
<li>
<a href="product.htm">
<img src="product-image.jpg" width="100" height="100" alt="Product image" />
<h2>Product title</h2>
<p>Product description</p>
</a>
</li>
Into this:
<li>
<a href="product.htm">
<img width="100" height="100" alt="Product image" src="product-image.jpg">
</a>
<h2>
<a _moz-rs-heading="" href="product.htm">Product title</a>
</h2>
<p></p>
<p>
Product description
</p>
</li>
Which forces the stylesheet to display the elements in a totally wrong way; I use the a element to get a big link containing the product image, title and description in a webshop product list.
I want those big links and can't find an alternative way to do this. What would you suggest?
I don't know how authoritative a resource xhtml.com is, but they do say that the a tag can only contain:
Inline elements, except a, at any depth
Text
A possible solution would be to just reorganize your HTML so that it makes more sense (eg, not trying to put block-level elements in inline-level elements). Just have a single link for the product (maybe in the h2, or around the image). Then use JavaScript to detect a click anywhere on the li, and load the link.
Does that make any sense? Here's an example.
Are all instances of these list items consistently coded? (Read: run the whole thing through the validator.) You said it only happens ~20% of the time, so you should first establish there's nothing different about the ones that break. This appears to be some kind of hyper-correction on the browser's part. A search for _moz-rs-heading turns up a bunch of old posts like this one. (Note the bug referenced there is fixed.) But in some of the cases, the people eventually discovered that their actual <a> tags were broken, they just weren't seeing it, and the modifications you're spotting were Firefox's attempt to handle it somewhat gracefully.
I had the same problem: the same HTML would display in a variety of ways. Literally each time I refreshed the page, Firefox broke my <a>..</a> into lots of smaller <a>..</a><a>..</a> blocks, each time in different ways. (Nearly) each time it displayed wrongly.
This page is a good resource, it suggested putting a <div> directly underneath the <a>, but in fact the page my web designer had supplied, which didn't work, already had that.
So what I did, was to replace my <div> with a <span style="display:block"> and that works now.
<a ...>
<span style="display:block">
...
</span>
</a>