Make images in posts wider

kirai
(@kirai)

7 years, 9 months ago
My customized Custom Css file is:
```
.wrap {
   max-width: 1245px;
   padding-left: 3em;
   padding-right: 3em;
}

#primary {
    width: 70% !important;
}

.has-sidebar #secondary {
    width: 24% !important;
}

.navigation-top a {
 font-size: 150%;
}

.post p{
 line-height: 2.0em;
 font-size: 120%;
}
```
The rest is the default Twenty Seventeen theme. I want the images in the blogposts to be wider (Around 700px or near the size of the paragraph) but the size seems to be mysteriously limited to around 445px.

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Nagesh Pai
(@nagpai)

7 years, 9 months ago

Hi there,

From the browser inspector it seems that the image has some inline CSS within the HTML code of the page.

Can you browse to the page in WP admin editor, get to the HTML tab, and see if there are any classes or CSS rules that limit width of the img element w.r.t. the image.

Feel free to share the HTML code you see for the page as well, if you would like me to take a deeper look. You can either use the code option, or use a sharing service like gist.github.com or pastebin.com

mezhouwf
(@mezhouwf)

7 years, 9 months ago

I just meet the same thing in my site. You can try this code in your Child theme style.css:

@media screen and (min-width: 48em) {

/* Layout */
.wrap {
max-width: 1273px;
}
.has-sidebar:not(.error404) #primary {
width: 68%;
}

.has-sidebar #secondary {
width: 26%;
}
.single-post:not(.has-sidebar) #primary,
.page.page-one-column:not(.twentyseventeen-front-page) #primary,
.archive.page-one-column:not(.has-sidebar) .page-header,
.archive.page-one-column:not(.has-sidebar) #primary {
max-width: 820px;
}

}

@media screen and (min-width: 30em) {

.page-one-column .panel-content .wrap {
max-width: 820px;
}
}

and, add this code in your functions.php of your Child theme:

add_action( ‘after_setup_theme’, ‘prima_twentyseventeen_setup’,11 );
function prima_twentyseventeen_setup() {
$GLOBALS[‘content_width’] = 800;
}

that’s all.
your can see my site: http://zhouwf.com
Thread Starter kirai
(@kirai)

7 years, 9 months ago
Hello,

Thank you @mezhouwf.

This seems to do the trick:
```
add_action( ‘after_setup_theme’, ‘prima_twentyseventeen_setup’,11 );
function prima_twentyseventeen_setup() {
$GLOBALS[‘content_width’] = 800;
}
```
I’m wondering if there is any way to do the same think without changing code inside functions.php

It seems to that it is a bad design decision to set that width fixed inside the theme php code instead of being on the css “layer”
mezhouwf
(@mezhouwf)

7 years, 9 months ago

@kirai
you need not make any change to the default twentyseventeen theme code. The offical way by the wordpress is :
make your own child-theme. just make a child-theme of the default twentyseventeen theme. and then add my code to the child-theme via functions.php.
how to make your own default child-theme? read this link:
https://codex.ww.wp.xz.cn/Child_Themes

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Make images in posts wider’ is closed to new replies.

Tags