style.css | theme tot een maximum breedte laten weergeven

Hoi allen,

Ik ben bezig met de website voor: http://www.stichtingmetdemuziekmee.nl

Op een klein scherm werkt het prima met het filmpje die ik in de sitebar heb gezet maar zodra de website op een groot scherm word bekeken dan zie je naast
het filmpje die ik van youtube heb ge-embeded een breed wit vlak komen wat niet de bedoeling is.

Code die ge-embed is:

<iframe width=”270″ height=”160″ src=”//www.youtube.com/embed/YJGNmIMB-YE” frameborder=”0″ allowfullscreen></iframe>

Echter doordat het thema responsive is krijg ik aan de rechterkant van het filmpje een groot wit vlak wat ik niet wil.

Wellicht is dan toch de beste oplossing om de website (thema) een maximale breedte te geven van bv 1024 pixels.

Als dat klaar is zou ik eventueel bovenstaande code nog wat aan kunnen passen zodat het filmpje in de juiste / beste verhouding kan worden weergegeven m.b.t. de breedte van het thema.

Mijn vraag:
Zou iemand van jullie me eventueel kunnen helpen die code in de stylesheet.css zo krijgen dat de website tot een bepaalde breedte wordt weergegeven van 1024 of 1078 pixels.

Het heeft me al behoorlijk wat tijd gekost om het gewenste effect te krijgen, echter tot dusver zonder het gewenste resultaat en omdat ik binnenkort de website moet opleveren vandaar dat ik jullie de vraag stel om me ermee te helpen en zou het zeer op prijs stellen.

Ik heb een bijlage meegezonden van de stylesheet.css van de template die ik gebruik (musik) een standaard template vanaf wordrpess.org gedownload.

http://wordpress.org/themes/search.php?q=musik

Wat ik zelf al o.a. heb geprobeerd is de textwidget aan te passen waarin ik de code heb toegevoegd. Onderstaand code’s hebben dus niet het gewenste restultaat opgeleverd.

Het betreffende stukje staat op regel 759:
.textwidget{
color:#6699ff;
padding:10px;
background:#f5f5f5;
overflow:hidden;
width:270px;
}

en deze:

Het betreffende stukje staat op regel 759:
.textwidget{
color:#6699ff;
padding:10px;
background:#f5f5f5;
overflow:hidden;
max-width:270px
}

Waar zet ik in de style.css een stukje code die er voor zorgt dat het thema tot een bepaalde breedte wordt weergegeven. En hoe ziet die code eruit?

——

Stylesheet

(style.css)

/*
Theme Name: Musik
Theme URI: http://wordpress.org/themes/musik
Author: Poena
Author URI: http://layout.nu/about/
Description: A responsive music theme with two widget areas, logo upload, sticky posts custom header and threaded comments. Includes Swedish translation.
Version: 1.1
Tags: white, blue, threaded-comments, custom-menu, sticky-post, translation-ready, post-formats, custom-header, two-columns, one-column, right-sidebar, left-sidebar, editor-style, featured-images
Text Domain: musik

License: GNU General Public License (GPL), v2 (or newer)
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

html {
-webkit-text-stroke: 1px rgba(0,0,0,0.1);
-webkit-font-smoothing: antialiased;
}

html {
background: url(images/mic.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body {
margin:0;
font-family: ‘Open Sans’, sans-serif;
line-height: 1;
}

a{
text-decoration:none;
color:#6699ff;
}

.wrapper {
margin:0 auto;
/*width:960px;*/
width:90%;
clear:both;
}

/* =Header
————————————————————– */
#header{
margin-top:3.2em;
position:relative;
}
.site-title {
font-size: 3.8em;
font-weight: bold;
margin:0;
font-family: ‘Oswald’, sans-serif;
}
.site-description {
font-size: 2.1em;
line-height:2.15em;
font-weight: bold;
margin-top:0.8em;
font-family: ‘Open Sans Condensed’, sans-serif;
width:100%;
}

table{margin:4px 4px 10px 4px; border-collapse:collapse;}
td{border:1px solid #f5f5f5; padding:4px;}
th{background:#f5f5f5;}

/* =Header Menu
————————————————————– */
#header-menu {
margin-top:2em;
display: block;
float: left;
width: 100%;
font-size: 1.5em;
position:relative;
z-index:9999;
font-family: ‘Oswald’, sans-serif;
background: url(images/70.png);
}
#header-menu a{
color:#fff;
}

#header-menu ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header-menu li {
float: left;
position: relative;
}
#header-menu a {
display: block;
line-height: 2em;
margin-right: 0.7em;
margin-left:0.7em;
padding-bottom:6px;
}

#header-menu ul li ul li{
float: left;
position: relative;
border-bottom:1px solid #999;
}

/*sub menu level 2*/
#header-menu ul ul {
display: none;
font-size:0.8em;
float: left;
position: absolute;
top: 2.8em;
line-height: 4em;
left: 0;
z-index: 99999;
width:170px;
padding-right:1em;
clear:both;
background: #666;
}
#header-menu ul ul a {
line-height: 1em;
padding: .5em 0 .5em 1em;
width:167px;
margin:0;
}

/* sub menu level 3-5*/
#header-menu ul ul ul,
#header-menu ul ul ul ul,
#header-menu ul ul ul ul ul
{
display: none;
font-size:1em;
float: left;
position: absolute;
top:0;
line-height: 4em;
left:185px;
z-index: 99999;
width:170px;
}

#header-menu ul li:hover > ul {
display: block;
}

#header img{
position:relative;
z-index:7;
margin:0;
padding:0;
border:0;
}

.header-image{
position:relative;
z-index:6;
margin-bottom:-2px;
padding:0;
border:0;
}

#header .header-logo {
float:left;
margin-right:10px;
margin-bottom:10px;
margin-right:25px;
border:none;
}
.sidebar-logo {border:none; margin-bottom:10px; margin-left:29px; margin-top:19px;}
.footer-logo {
float:left;
margin-right:10px;
margin-bottom:10px;
margin-right:25px;
margin-left:0;
border:none;
}

/* Full width if the sidebar is inactive: */
.no-sidebar .wrapper .container{width:100%;}
.no-sidebar .wrapper .container .post,
.no-sidebar .wrapper .container .type-page,
.no-sidebar .wrapper .container .type-attachment{width:100%;}
.no-sidebar .wrapper .header-image{visibility:hidden; height:0px;}

/* Float the content to the right if the sidebar is to the left!*/
.left-sidebar .wrapper .container{float:right;}
.left-sidebar .wrapper .container .post,
.left-sidebar .wrapper .container .type-page,
.left-sidebar .wrapper .container .type-attachment{float:right; margin-right:0;}

.left-sidebar .wrapper #rightsidebar {margin-left:0px;}

/* Keep posts and stickies in place if there is a sidebar: */
.container{
width:70%;
clear:both;
margin:0;
padding:0;
float:left;
}

/* =Content
————————————————————– */
.post,
.type-page,
.type-attachment
{
line-height: 1.5;
/*margin-bottom:35px; */
margin:0;
width:100%;
padding:2em;
background:#fff;
color:#333;
font-family:Verdana,Georgia,Serif;
-ms-word-wrap: break-word;
word-wrap: break-word;
overflow:hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.post-title, .archive-title{
display:block;
line-height:1.5;
padding-bottom:0.5em;
padding-top:0;
margin:0;
clear:both;
color:#000;
font-family: ‘Oswald’, sans-serif;
}
.archive-title{
padding-bottom:0.5em;
}

.crumbs{
font-size:0.9em;
clear:both;
margin-bottom:1.3em;
}
.crumbs i{opacity:0.3;}
.crumbs a{opacity:1.0;}

.crumbs a:hover{
text-decoration:none;
}
.meta {
clear: both;
padding:1em;
width:100%;
margin-top:5px;
margin-bottom:5px;
margin-left:0;
font-size:14px;
line-height:16px;
}
.format-link .post-title,
.format-aside .post-title,
.format-status .post-title,
.format-link .crumbs,
.format-aside .crumbs,
.format-status .crumbs {
display:none;
}
.format-link,
.format-status{
min-height:30px;
}

.attachment_nav_clear{float:right; clear:both; margin:4px;}
.fullimg{width:100%; float:left; clear:both; margin:6px;}

/*author info
————————————————————– */
.author-info {
color:#6699ff;
clear:both;
font-size:1em;
line-height: 20px;
overflow: hidden;
min-height:45px;
margin:0;
padding-left:4px;
padding-top:16px;
padding-bottom:0;
}
.author-info .author-link{
padding-top:6px;
}
.author-info.author-link a {
color:#6699ff;
}
.author-info .author-avatar {
float:left;
height:60px;
width:60px;
margin:10px;
}
.author-info .author-description {
float:left;
margin:10px;
font-size:1em;
}
.author-info h2 {
font-size:1.2em;
font-weight:bold;
margin:0;
}

/* Stickies*/
.sticky,
.whitetop{
position:relative;
z-index:7;
float:left;
width:100%;

padding:2em;
background:#f5f5f5;
color:#666;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

.sticky .crumbs,
.sticky .meta{display:none;}

.search-post
{
margin:0;
clear:both;
overflow:hidden;
padding:1em;
min-height:5px;
background:#f5f5f5;
color:#666;
position:relative;
}

/* Navigation
—————————————-*/
.more-link {
color:#666;
clear:both;
padding-top:3px;
}
.page-link {
color:#666;
clear:both;
padding-top:3px;
padding-bottom:12px;
}
.page-link a{
color:#666;
}

.page-link a:hover,
.more-link a:hover{
text-decoration:underline;
}
.older-posts,
.newer-posts{
font-family: ‘Oswald’, sans-serif;
background:#fff;
color:#666;
min-width:170px;
padding:6px;
min-height:15px;
margin:0;
margin-top:30px;
margin-bottom:25px;
-ms-word-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
padding:1em;
}

.newer-posts{
float:right;
}
.older-posts{
float:left;
}
.older-posts a,
.newer-posts a,
.paged-comments{
color:#666;
}
.older-posts a:hover,
.newer-posts a:hover,
.paged-comments a:hover{
color:#6699ff;
}

.paged-comments{
background:#fff;
color:#666;
width:140px;
padding:1em;
margin-bottom:25px;
margin-top:25px;
min-height:15px;
font-family: ‘Oswald’, sans-serif;
}

/* =Images and objects
————————————————————– */

@media screen {
img, object{
width: auto; /* for ie 8 */
}
}

img,
object {
max-width: 100%;
height: auto;
}

a img {border: none;}
p img {margin: 0.5em;}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img {
max-width: 100%;
height: auto;
}

.attachment-thumbnail{
border-radius:4px;
}

.type-attachment .attachment-thumbnail{margin:8px;}

img.alignleft {
margin-right: 1em;
}
img.alignright {
margin-left: 1em;
}

.wp-caption {
padding: 5px;
text-align: center;
max-width:100%;
}

.wp-caption img {
margin: 5px;
}
dl.gallery-item, .wp-caption, .wp-caption-text {
color:#6699ff;
font-size:0.9em;
}
.gallery-caption {}
.wp-smiley {
margin: 0;
}
object{margin:15px;}

blockquote{border-left:3px solid #6699ff; padding:5px 0 5px 10px;}

/* =Comments
————————————————————– */
#comments {
clear: both;
width:100%;
margin:0;
padding:0;
}
#comments .navigation {
padding:0 0 18px 0;
}
h2#comments-title{
padding:1em;
text-decoration:none;
font-family: ‘Oswald’, sans-serif;
font-weight:bold;
color:#000;
font-size: 1.5em;
}
.commentlist {
list-style:none;
margin:0;
padding:0;
}
.commentlist .children {
list-style:none;
margin:0;

}
.commentlist .children .comment-body{
background: url(images/20w.png);
}

.comment-body{
font-size:1.2em;
padding:1em;
min-height:5px;
line-height:1.5;
margin-bottom:4px;
background: url(images/20.png);
color:#fff;
overflow:hidden;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.comment-body p {
margin:0;
padding:0;
}
.comment-body a{
color:#fff;
text-decoration:none;
}
.comment-meta{
margin-bottom:20px;
margin-top:20px;
font-size:0.8em;
}
.comment-author {
margin:0;
padding:0;
font-weight:bold;
font-size:1em;
}
.comment-author a{
color:#fff;
}
.commentlist .avatar {
margin-right:10px;
}

.comment-edit-link{
color:#fff;
font-size:.9em;
}
/*.bypostauthor .comment-author {}
.bypostauthor .comment-body {
border-left:2px solid #6699ff;
}
*/
.comment-reply-link{}

.comment-form-comment label {margin-right:6px;}

.reply a{
background:#6699ff;
padding:1em;
float:right;
font-weight:bold;
font-size:.6em;
color:#fff;
text-decoration:none;
}
.reply a:hover{
color:#fff;
}
.children li.depth-5 .reply{
visibility:hidden;
}
.commentlist .even {}
.nopassword,.nocomments {
/*display: none;*/
}
.pingback {
color:#6699ff;
}
.pingback a{
text-decoration:none;
}

/* Comments form
————————————————————– */

input[type=submit] {
margin:3px;
padding:3px;
}

#respond {
overflow:hidden;
position:relative;
background: url(images/40.png);
color:#fff;
padding:2em;
margin-bottom:30px;
}
#cancel-comment-reply-link{
font-size:.9em;
font-weight:normal;
}
#respond a{
color:#ccc;
}
#respond p{
margin:0;
}
#respond .logged-in-as{
padding-bottom:6px;
font-size:.9em;
}
#respond .logged-in-as a{
color:#ccc;
}
#respond .comment-notes{
font-size:12px;
margin-bottom: 1em;
}
#respond .required {
color:#fff;
font-weight: bold;
}
#respond label {}

#respond input {
margin:9px;
}

.comment-form-comment label,
#respond textarea {
padding:6px;
width:80%;
float:left;
clear:both;
}
#respond .form-allowed-tags {
margin-top:14px;
margin-bottom:14px;
color:#ccc;
font-size:.9em;
line-height:1em;
float:left;
clear:both;
}

#respond .form-submit {
margin: 12px 0;
}
#respond .form-submit input {
font-size:.9em; width: auto;
}

/* =Widgets
————————————————————– */

#rightsidebar{
float:left;
width:30%;
background: url(images/70.png);
margin:0;
margin-bottom:25px; /*Adds space between widget and footer if needed */
padding-left:1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#rightsidebar ul{
width:100%;
margin:0;
float:left;
padding:0;
color:#fff;
}

.widget{
width:90%;
list-style: none;
position:relative;
z-index:2;
float:left;
margin-bottom:25px;
padding:1em;
color:#fff;
}

.widgettitle{
margin-left:9px;
margin-top:4px;
margin-bottom:15px;
font-weight:bold;
font-family: ‘Oswald’, sans-serif;
font-size:1.5em;
}

.widget ul{
font-size:.9em;
padding:0;
margin:0;
float:left;
width:100%;
}
.widget ul li{
list-style: none;
font-weight:normal;
margin-left:9px;
margin-top:6px;
margin-bottom:9px;
padding:0;
text-align:left;
color:#6699ff;
}
#calendar_wrap{
padding-top:5px;
font-size:.9em;
color:#fff;
}

.widget_calendar .widgettitle {
display:none;
}
table#wp-calendar,
#wp-calendar {
color:#fff;
font-weight:normal;
padding:5px;
}
#wp-calendar th{color:#6699ff;}
#wp-calendar a {
color:#6699ff;
text-decoration:underline;
}
#wp-calendar caption {
font-family: ‘Oswald’, sans-serif;
font-size:18px;
margin-bottom:8px;
color:#fff;
}
.tagcloud{
padding:10px;
}

.widget ul li a,
.tagcloud a {
color:#6699ff;
}
.textwidget{
color:#6699ff;
padding:10px;
background:#f5f5f5;
overflow:hidden;
max-width:270px
}

.widget_search form, .searchform form {margin-top:3px;}
.widget_search input, .search-post input, #s{
margin:3px;
padding:3px;
}

.widget_rss ul li {margin-bottom:25px; width:97%;}
.rssSummary{width:90%;}
.rss-date{width:90%; float:left; clear:both;}

select {
max-width: 150px !important;
overflow: hidden;
}
option {
max-width: 120px !important;
overflow: hidden;
}

/* =Footer
————————————————————– */

#footer {
margin:0 auto;
padding:0;
width:100%;
clear:both;
}

#footer .site-title, #footer .site-title a{font-size:22px; font-weight:normal; color:#000;}
#footer .site-description{font-size:20px;}

#footer .widget{
width:100%;
padding:2em;
background: url(images/70.png);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Alignment
————————————————————– */
.alignleft {
display: inline;
float: left;
}
.alignright {
display: inline;
float: right;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
}

/* Responsive
——————————————————-*/

@media screen and (max-width:1024px){
.wrapper{width:90%;}
#header {background-size:100%;}
}

@media screen and (max-width:780px){
.site-title {font-size:2.6em;}
#header-menu{font-size:1em;}
#header{width:100%}
#header{background:none;}
.container, #rightsidebar{width:100%;}
.sticky{width:100%; margin:0;}
}

@media screen and (max-width:600px){
.wrapper{padding:1em; margin:0; width:90%;}
#header{width:100%}
.header-logo, .site-title{clear:both;}
.header-image{display:none;}
.sticky { width:100%; margin:0; }
#footer .widget{width:100%;}
#rightsidebar ul{width:100%; margin:0; margin-top:10px;}
.left-sidebar .wrapper #rightsidebar{margin-left:0px;}
#header-menu li ul {visibility:hidden;}
}

——

Jullie reactie’s zie ik met belangstelling tegemoet.

Met vriendelijke groet,

Marinus59