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>
Related
I'm trying to make a simple yet interactive webpage for my school. Our current homepage we use for links is plain and boring.
I've created this: JSFiddle
But when I open the 'Student Links', the 'PHHS Website' button seems to automatically position itself ~50 pixels up.
Code because I have to:
<a class="itemLink" href="http://hcps.us/phhs/">
<div class="itemStudentsLink" id="PHHSWebsite">
<p class="itemText">PHHS Website</p>
</div>
</a>
If anyone knows why it's acting like this, please tell me. I'm not sure why this problem occurs.
This has to do with the vertical alignment of the blocks and the fact that one of the block's text goes onto two lines. Add
.itemStudentsLink {
vertical-align: bottom;
}
http://jsfiddle.net/ExplosionPIlls/mKYaL/19/
I'm using a countdowntimer on my website for shipping.
This my code I added in my header.tpl : http://jsfiddle.net/ALrnK/3/
<div id="leveransinfo">
<img src="http://mobilprylar.nu/img/frakt.png"/>
<img id="posten" src="http://mobilprylar.nu/img/s/17.jpg"/>
<div id="timeleft"></div></div>
<div id="levinfo">
<b>Leveransinformation</b></br>
</br>
ContentContentContentContentContentContentContentContent</br>
ContentContentContentContentContentContentContentContentContent</br>
</br>
ContentContentContentContentContentContentContentContentContentContentContent</br>
</br>
</div>
I'f you take look att (link was removed due to canceled project) and hover the countdowntimer it extends the header.
I would like the information to show there but on top of everything else. So its displays over the menu and the imageslider.
I tried to use z-index but it does not matter how I do. Is there anything else I should use instead?
Without seeing the actual styles, here's one possibility - Make sure the element that you are changing the z-index of is either position: relative;, absolute, or fixed.
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
I'm somewhat perplexed by this.
..
The page im working on is located in
www.gd-gaming.com/wordpress/
However, for the background image to show, instead of putting it in
www.gd-gaming.com/wordpress/images
I've had to put it in
www.gd-gaming.com/images
Now, When I visit an additional page from the one im working on, (www.gd-gaming.com/wordpress/breakout-canidates/)
That background image dissapears. I cant understand why, I use the same code on a vbulletin website and the background displays everywhere. If I firebug it, it tells me the image didnt load, meaning the path is incorrect. I'm not sure where to put it though.
For actual reference..
http://www.gd-gaming.com/wordpress
http://www.gd-gaming.com/wordpress/breakout-canidates/
Code: <div id="background">
<img class="background" src="images/bgmain.jpg">
</div>
use absolute:
<div id="background"> <img class="background" src="/images/bgmain.jpg"> </div>
instead of relative one
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?