Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
Related
TL;DR how can I get the images to fill the grid squares on this page.
I am working on a site I inherited that has been through three different web designers so it's a bit of a mess on the back end. It also uses timber/twig/acf which were new to me so I spent last week trying to figure out how everything is configured. I was trying to replicate this archive page so was playing around with the CSS but when I left work Friday everything was fine...this morning suddenly the images don't fill the grid squares. I don't know if something I did changed it and it was delayed bc of caching or if there was an update or what but I would love to change it back before anyone notices. I actually have the old version of the page still open where the images do fill grid squares and have spent all day looking through the code to see what changed but can't find any difference.
It's this css rule that preventing it from taking 100% width:
.rtr-6-grid:not(.knowledge-cta) .p-absolute.p-center div {
width: 470px;
}
Change this :
<div class="d-flex d-flex--y-center d-flex--x-center p-absolute p-center rtr-fill">
<div>
<img src="..." width="1779" height="1779">
</div>
</div>
To this :
<div class="p-absolute">
<div>
<img src="..." width="auto">
</div>
</div>
I am working on my website at the moment. And I realized, when looking at the mobile site that one of my images stretches/changes it's aspect ratio. Keep in mind this is only on iPhones. I had a few friends look at the site, and only the people with iPhones had the image stretched like this.
This is the page on the browser
This is the page on my iPhone 11
<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
<img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>
I originally had height: auto; in there as well, and when trying to solve this issue I found an older post saying that could be the issue. Sadly it did not resolve it.
I know I can easily solve this problem with media queries, but there must be a reason why this happens only on iPhone. I also only have in body styling on this image, you can see it on the browser preview on the inspector.
If you would like to look at it yourself. The Website URL is https://www.robinalexander.at/about-me
Try to remove the classes d-xl-flex align-items-xl-center from img and give it a display: block. The parent div will keep the img in place
I know questions about broken links get asked all the time, however my issue seems a bit different, and none of the solutions have worked.
Right now none of the links to other websites in my nav section worked when clicked. It registers that they are there, and if you right click it and select "open in new tab" it works, but otherwise, nada. A few relative links (if thats the term for the href="#xxx" link to content on the page) to modal popups work fine though.
My HTML Code is listed below, as well as a Pastebin link to the CSS (so that I don't clutter up the box).
Removing the class="navigation" from the list tag seems to fix the link issue. Leaving the class on the tag but removing all the relevant CSS from the stylesheet, however, does not eliminate the issue and just removes the styling. I can't figure out why this would be the case.
I've tried setting the z-indices of my background, menu and nav to 1,2,3 (and 3,2,1 just for the hell of it) respectively so that they don't interfere, as recommended in other questions here, but to no avail. Anyone have any ideas?
CSS: http://pastebin.com/1KVTdBvF
Site: http://www.magratheamedia.com/npo
<div class="menu">
<div class="container clearfix">
<div id="logo" class="fleft">
<img src="images/logo.png" />
</div>
<div id="nav" class="fright">
<ul class="navigation">
<li data-slide="1">Home</li>
<li>Forum</li>
<li>Wiki</li>
<li>Government</li>
<li>Charter</li>
<li>In-Game</li>
<li>Applicants</li>
<li>IRC</li>
<div class="clear"></div>
</ul>
</div>
</div>
Your problem isn't CSS, it's your jQuery. This, in particular:
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
When you find your links, like this:
var links = $('.navigation').find('li');
You have to somehow exclude the ones that go to external sites. Maybe by giving the modal links their own class name or something.
I am using the Facebook Like social plugin on my website, and every time the page loads, the plugin stretches the height of the div it is in until the plugin has loaded.
I did define the height of the div that the social plugin is in, but even though the height stayed the same, you could still see the shift. I am also using the Twitter and Google plus social plugins - this makes the shift more noticeable since they get shifted also (shift under the h3 heading).
.socialBookmarks {margin:30px 0;padding:5px 15px;overflow:hidden;}
.socialBookmarks .social-wrap
{display:inline-block;vertical-align:middle;}
.social-wrap .ezimageBox {float:left}
<div class="socialBookmarks">
<h3 class="inline-block">Share:</h3>
<div class="social-wrap clearfix">
<div class="ezimageBox">
(loads twitter social plugin)
</div>
<div class="ezimageBox">
(loads google plus social plugin
</div>
<div class="ezimageBox">
(loads facebook social plugin)
</div>
</div>
</div>
Anyone have any ideas on how to work around this problem? :)
Setting the width and height of the wrapping <div> (in your case, .ezimageBox) usually does the trick for me.
Try this:
.social-wrap .ezimageBox {float:left, width:100px, height: 20px; overflow:hidden;}
Does it still flicker?
Take a look at this page in FireFox. Feel free to navigate to any of the top six product categories to see more of the same type of code.
If you are [un]lucky enough to see the glitch, you will see at least one product box expand it's height to epic proportions.
Here is the code:
<div class="product_category">
<a href="../products/dht_1500.php" style="height: 340px;">
<h3>DHT 1500</h3>
(superfluous HTML omitted here)
</a>
</div>
Here is what Firebug reveals:
<div class="product_category">
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
<h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
(superfluous HTML omitted here)
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>
You can see FireFox is definitely closing my tags and re-opening them again, and pulling the custom CSS height style along with it, which is resulting in each product box height skyrocketing. Also note that strange _moz-rs-heading="" bit.
I suspect my problem has to do with my using block HTML elements within an inline tag, but I thought I solved that problem by converting the tags to block formatting in my stylesheet:
.product_category a {
display: block;
}
FireFox is playing favorites to my tags. It usually renders the page like I want it, but then every once-in-a-while, it will blow one of my product boxes sky-high, and seemingly at random.
The pages work properly in Internet Explorer and Safari. I have been testing it with FireFox 3.6 on Mac, but have seen the same problem on FireFox for PC.
Having block level elements (h3) inside an inline element (a) is not valid HTML.
Change your block elements to a span and use CSS to style it how you wish.
A similar question with the exact same symptoms was asked a few days back. The solution there was in fact taking the native block elements out of the natively inline ones. Seems changing display doesn't help in this case.