Correct css and html - html

If someone can take a look at this link I want to have 2 music players next to eachother( I provided just the text). When I change the div class to the css I think is correct it works only my desktop ( 1 music player left the other player right side) and when I check on my mobile devices it is incorrect ( both players left 1 is more left than the other. I hope this makes sense I am new this web design world so please be kind.
enter code herehttps://jsfiddle.net/GsPop/73bzuqLr/
If I need to upload html let me know.
Thanks,
GsPop

Sorry about the enter code mistake I am new to this and I could not figure out if it was my code or a special jsfiddle code I will do some research on that.
tsg your comment The last column's CSS has "float:right" what is the correct code?
Thanks and sorry for my code mistake,
GsPop

Related

Code for Reddit style image Carousel that's on home page

Has anyone got any idea on how to implement this carousel into my website? I am using WordPress and I am not sure how to go about this. I was told to use 'foo gallery' to achieve the same look however, it doesn't really feel the same and also didn't work on my site (for some reason).
I have tried to code some of this but I am awful at coding and I am mainly just spending my time watching youtube help videos if I am being honest!
I'll explain my neeed for this and what I would like it to do and then, if you could help me that would be great!
So like on reddit, I would like to implement this feature on my home screen to show off some of the 'Hot topics of the day'. Preferably, some code could automatically update the images and text each day depending on the comments/views left on a page - so the top 4 most viewed pages would be automatically added to the front page with a custom image (which I have created). However, that seems quite hard. So just the layout/template of the images (like the photo provided) AND there is a way for me to manually change the images and names each day would suffice. I would also like to have 4 photos which also act as buttons with the curved boarders.(again, like the image I have attached)
Just so it's clear, I do not want these images to be able to move off like a slideshow, I just want them to stay in place and be able to change either manually or automatically.
Maybe this is called something other than a carousel and would be easy to do... i dont know! So if you do, please let me know.
Furthermore, I appreciate this is a place mainly for code to be posted however, I won't post my code as it is useless! If anyone wants to share any code or contact me privately then that would be very much appreciated.
Thank you

Horizontal sliding image gallery grid

I need some code for a website. I've done some code myself however, it's not exactly what i had in mind. I was hoping that I would be able to get some code which would be similar to the image shown below. Any help would be appreciated as I was hoping to go live with this website on Thursday.
Thank you.
Image Link

Getting webpage pictures to overlap scroll

I'm doing the Free Code Camp thing and the first Zipline challenge is to replicate the following webpage on Code Pen. What I'm looking for is a hint or two in the right direction so I can get the pictures to scroll like they do on the webpage. I don't want the answer(s), just a hint or hints in the right direction so that I can do my own work. I think I'm suppose to use CSS, and if that's the case I have no idea which property/properties to use, maybe one of the background properties?
And the hint I was looking for is 'css parallax scrolling'. Thanks for all the help.

nth-child not rendering in Dreamweaver

So I have a newsBox with float left that contains a picture, title and small text that contains small segments of news. I have 2 news boxes in every row, and I want every 1st newsBox to have an extra margin-right with 20px.
I have used .newsBox:nth-child(odd) { margin-right:20px; } in the css, and it works fine in Chrome but doesn't render in Dreamweaver CS6.
Is this not an officially supported rule? Or there is another more "clean" way to do this?
Thanks in advance!
The Dreamweaver design view sucks, it usually never gives an accurate representation of how things look in a real browser.
As an alternative and a helpful answer to your issues you can try the live view from dreamweaver that was implemented after CS5.
Here is a video explaining how to set it up.
http://tv.adobe.com/watch/creating-time/dreamweavers-live-view-helps-you-save-time/
As a final note, try not to use the design view and tey to get more into the code... once you get used to it you can read the code and visualize almost exactly (usually always better than design view) how things look. So please do not trust design view in dreamweaver for development.

Images and copy won't align

Please take a look at this website: http://jlwingert.com/seametrics.html
I didn't post the source code because it's quite lengthy. The problem is the lower half of the page.
I'm supposed to clean up this website and noticed that the bottom half of the page has unaligned images and copy. I've gone through the coding and I'm having the hardest time finding the problem.
I'd be appreciative if anyone could view the source & see if they could provide assistance to this novice!
Thank you!
Jen
You start a new table # WMX Series rather than continuing the existing one that has a 150px padding column. That's the problem. Also be ready for the "don't use tables" crowd to flame you.