Would like to horizontally align multiple images and have them flow down the page if there are too many. (This is a mini gallery in the middle of a wordpress post).
After trying multiple code variations found on this site, I still can not get it working. However it works fine at JSFiddle...
Links needed here here:
Working code at JSFiddle
Non-working code at my website (even though the exact same code is being used as above).
Is anyone able to assist me as to what's going wrong?
*HTML and CSS are evident in the first 'JSFiddle' link
*Using latest version of wordpress
PROBLEM SOLVED: (can't answer my own question for another 8hrs due to being new)
There is Auto Formatting and AutoText in wordpress that was automatically adding 'breaks' to the end of my image hyperlinks.
Added ".photographs br {display: none;}" to the CSS and it works fine!
You have <br> tags in between your images. Remove them and it will fix itself.
remove <br/> in your code.
PROBLEM SOLVED!
There is Auto Formatting or AutoText in Wordpress that was automatically adding <br /> to the end of my image hyperlinks.
Added .photographs br {display: none;} to the CSS, and it works a treat.
Related
Our whole site (running bootstrap v3) has an issue with link tags where when clicked, it sometimes doesn't visit the page on that first click and instead it shifts slightly down and to the left, pushing other elements with it.
Example:
Before click on tag
After click on tag
I've tried using Display: block; and Display: inline-block; but that hasn't helped. There is no issue if I were to replace these as tags (nothing shifts around), but I shouldn't have to use tags.
I've never encountered this issue before so if anyone has dealt with this or might know what could be causing it, any help would be much appreciated!
Thanks in advance
Try display:block on a:active. define definite height and width to links. It is hard to determine the issue since you haven't posted any code, but I am sure this will fix it.
I'am making my first site but my css style for links wont work can anybody help my please.
my code you can find out here: http://pastebin.com/eM8FzrWH
Your style is working fine. You are removing the text decoration of a links, then re-adding the underline by wrapping the text in the links with
<u>Something</u>
Your are used tag (which is for underline) within the tag.
Remove tag for your link tag. Now your css working fine.
This code works on all desktops and tablets, in every browser, but for some reason I cant find, it is not working on cellphones, android or apple!
I cannot even select the text on cellphones..
<div class="inner-content block-content-style-2">
<a href="index.php/fr/services-fr/moule">
<div class="icons-molding"> </div>
</a>
<h3 class="title">Conception</h3>
</div>
I tried moving the href to a couple of place, but didnt change anything, but anyways, even if it is not a link, i should be able to select the text when using a cellphone
I tried to add a href inside the h3 tag for mobile to click on it, but it is not working either.
you can try it live here: http://www.qualiplast.com
On desktop or tablet, it works just as intended, but not on any cellphone.
Thanks for helping me out.
There is a div with an id of 'avatar-body-middle-block' that is appearing above the links on mobile, and preventing them from being clickable. Remove (or more likely hide) this div on mobile and the links will work.
I faced the same problem. Here's how I solved it in my case.
I tried inspecting on the 'a href' element. Turns out that some other element shows up in the developer console. After some pondering, I realized that some other div element was showing up above my link.
After reading through the css styling for the overlapping element and disabling the overlapping css command, the link started working for me. (float: none had to be deleted in my case, from an overlapping div)
Hope this helps someone else out there
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
So here's the website that has the container that I want to emulate: container
Here's the textbox specifically:
Here's what mine looks like:
They gave their css file and I looked at their html source code. I got the part in the html and css that pertains to the demo text and style. Here's all the code in fiddle
I'm pretty new to web programming, just a couple weeks in. And the css for the demo text looks daunting. I'm trying figure out how mine is different. Can anyone tell me what I need to do to fix my container to look like theirs? Thanks
Here's a fixed version: http://jsfiddle.net/dain/XJqvG/6/
The main problems were:
you haven't included the required JavaScript and CSS files, this
custom scrollbar requires the libraries as explained at the top of the article
you have to set a fixed height on the sample element
For some reason it still doesn't want to scroll with the touchpad, but that might just be something with JSFiddle.