Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won

  1. Yes, I would say that is the issue. So you need to split out the commands manually. Unfortunately, I've run out of time to continue assisting with this one, however these articles will give you all the info you need to sort this out. You need to look at the CSS rules for background size: http://www.w3schools.com/cssref/css3prbackground-size.asp ... and background position: http://www.w3schools.com/cssref/pr_background-position.asp. Utilising these rules should get you the result you are after (but will require experimentation).
  2. For sizing and positioning, try the below. Note the 30% entry in the background command, the addition of padding to the bottom of the menu, the words "center center" in the background command ... .mobile-nav .show-nav { background: url("http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original") no-repeat scroll center center / 30% auto #000000; border-bottom: 1px solid #000000; color: #FFFFFF; cursor: pointer; display: block; max-height: 50px; padding: 1em 40px 50px; }
  3. Oh sorry, I didn't realise you wanted it in the top black bar. That's different ... but if you play around with the code I gave you (take blocks out, check the response) you should be able to figure it out. For the sake of usability, I'd recommend keeping that mobile navigation bar free of logos and placing the logo underneath instead, but of course, it's up to you.
  4. OK, this code could be a lot cleaner and might not be totally accurate, but in the interests of time, simply replace the first block I gave you with this: @media only screen and (max-width: 640px) { #header #logo { background-image: url("http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original"); background-repeat: no-repeat; margin: 75px auto 0; } .site-tagline { position: relative; top: -20px; visibility: hidden; } #header #logo.logo-image img { height: auto; max-width: 100%; visibility: hidden; } } See how that goes.
  5. There are two steps to this. The first is to write the code that is going to achieve the effect you require. The second is to target this code so that it only activates when the display size of the device being used to view the site matches your specifications. As a starting point, the following should display the company logo on an smart phone in portrait mode for your site. Insert it into your custom CSS and either scale down the window or check it on a mobile phone. If it works, you can use this as a guide to further customise the mobile display of your site. @media only screen and (max-width: 640px) { #header #logo { background-image: url("http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original"); background-repeat: no-repeat; margin: 75px auto 0; } } Hope that helps ...
  6. I believe that you would need to target all code block elements if you want to do that. SQSP has no way of differentiating between a code block that contains (for example) an embedded audio player or (in your case) a code block that contains a video file. So all code block elements would be affected by this change. If that's not an issue for you, then we can locate the right element to adjust - but remember that all code blocks will be affected by this change. Another forum person might be able to confirm or correct this ...
  7. Do you want to target this to all videos on your site, or just this one? If you just want to target this particular video, you can add the required CSS code into your iframe code. This is referred to as "inline style". Insert this line into the existing iframe HTML: style="padding:1px;border:1px solid black;" This will achieve the desired effect but it will target it only to this particular element. If you need this for all video elements, the situation will be different. You will need to manually add the CSS to each element, or edit your site-wide CSS (and the code will be different, so post back here if that is the case). A copy of the complete iframe code with padding and border follows for your reference: <iframe width="640" height="360" style="padding:1px;border:1px solid black;" src="http://api.smugmug.com/services/embed/2249658140_P2BGWph?width=640&height=360&nohome&nologo"> Hope that helps.
  • Create New...