Updated blog engine and design

Took the time to migrate to blogengine 2.9 a couple of days ago, about time since the last theme didn’t even have responsive design. I really liked the default theme so I stuck with it, just made some simple tweaks to the layout. 

I also made some changes to the YoutubeViewer extension to make it responsive by linking in the following css in the main layout and changing the extension code to wrap the iframe in a div with the flex-video and widescreen classes set. 

.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;

.flex-video.widescreen { padding-bottom: 57.25%; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }

Works like a charm, iframe resizes when window size is changed to fill up the main column. Until next time, have an excellent day! ;-)

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *