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.
/wp-content/uploads/2023/03/ts_logo-300x138.png
0
0
ajtowf
/wp-content/uploads/2023/03/ts_logo-300x138.png
ajtowf2014-02-09 21:02:002014-02-09 21:02:00Updated blog engine and design
.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! ;-)
Leave a Reply
Want to join the discussion?Feel free to contribute!