Make full-width images smaller

  • Posted in : TheBlogger
  • nerwin
    Participant
    16 October 2016 at 18:44
    #44583

    I really like the full width images feature, but I find it TOO big for me, so I’m hoping there is some easy CSS code I can add that limits how big the image is displayed.

    I want to do it both for the featured image AND the full-width image tag.

    Can this be done rather simply?

    Thanks!

    serkan
    Moderator
    18 October 2016 at 18:34
    #44687

    Hi, You can try to use this custom css code;

    @media screen and (min-width: 1200px) { 
.full-width-image img, .full-width-image .featured-image { 
width: 70%; right: 15%; left: 15%; } }

    Thanks

    nerwin
    Participant
    19 October 2016 at 15:01
    #44714

    Thanks! But that didn’t seem to work unfortunately.

    I just want the images a little bit bigger than the text. Can’t be too hard right? Haha.

    serkan
    Moderator
    19 October 2016 at 15:22
    #44717

    Hi, Could you provide me your related URL, please ?
    This custom CSS code will make the full-width image smaller but larger than the text. If it is not working well, then I will check your source codes.
    Thanks

    nerwin
    Participant
    20 October 2016 at 14:38
    #44745

    So I went to the customizer and went to single post and selected “featured image full width” and that seemed to have done the trick for the most part.

    When I add the image tag “full” to the images I added in the posts, it actually makes them smaller.

    My website isn’t done yet, still figuring things out. This theme has so many options haha. I’m using the john template.

    But it’s http://nickerwin.com if you want to check it out for yourself.

    serkan
    Moderator
    20 October 2016 at 15:58
    #44758

    Hi, You chose link to media file. If you set it to link to none, it should be okay. Link to = media file is changing the markup.
    Thank you.

    nerwin
    Participant
    20 October 2016 at 15:59
    #44760

    Thanks!

    Everything is kind of messed up at the moment. I’ll have to fix it but I did also notice when in grid/masonry format all the images are smaller too.

    serkan
    Moderator
    20 October 2016 at 16:09
    #44762

    Hi, Please let me know when you change the setting link to = none for full width images.
    If there is still issue, we will solve it.
    Thanks for the feedback.

    nerwin
    Participant
    20 October 2016 at 17:35
    #44764

    Ok well that seemed to have worked but now the grid/masonry formats featured images are too small haha.

    nerwin
    Participant
    20 October 2016 at 19:17
    #44770

    Made a mistake.

    serkan
    Moderator
    21 October 2016 at 23:08
    #44788

    Hi, I could not see the url for grid page.
    Well, we should make you happy =) Let’s try to find a solution.

    nerwin
    Participant
    23 October 2016 at 04:52
    #44814

    Sorry about that.

    I decide to change my design and do something different.

    HOWEVER, I am still very much interested in making the featured images and regular images wider than the text but not like insanely huge like the full image class. Since I post a lot of my photos, I just want them to be the highlights of posts.

    Also, can videos too match the size?

    Thanks for all your help, I really appreciate it a lot.

    ahmetsali
    Keymaster
    24 October 2016 at 13:28
    #44842

    Hi, remove the previous custom css code and add this;

    @media screen and (min-width: 1400px) {
	.single .content-area:not(.with-sidebar) .gallery, 
	.single .content-area:not(.with-sidebar) .aligncenter:not(.full), 
	.single .content-area:not(.with-sidebar) .entry-content .owl-carousel,
	.single .featured-image, 
	.content-area:not(.with-sidebar) .blog-regular .featured-image, 
	.content-area:not(.with-sidebar) .blog-regular .gallery, 
	.content-area:not(.with-sidebar) .blog-regular .owl-carousel {
		width: 140%;
		max-width: 140%;
		margin-left: -20%;
		}
}

    this should enlarge the featured images in your blog regular layout and single posts. It will also be applied to your images in post content set as align-center (not full).

    nerwin
    Participant
    24 October 2016 at 16:09
    #44855

    Will it affect videos too?

    ahmetsali
    Keymaster
    24 October 2016 at 16:16
    #44856

    nope, sadly videos can’t be adjusted easily with just some custom css code.

    nerwin
    Participant
    24 October 2016 at 16:22
    #44857

    Bummer. Well I don’t intend to share videos too often anyways, I did manage to make videos work the same as featured images though, which is cool.

    Maybe you can help me with something else, I’m trying to adjust the font of the entry meta. I tried added .entry-meta in the custom css but it doesn’t do anything.

    I didn’t see any options in the customizer either to adjust the entry meta, Unless I’m just not seeing it. I just want to style it more.

    Thanks in advance!

    serkan
    Moderator
    25 October 2016 at 12:37
    #44873

    Hi,
    You can use this custom css code. Also, we will add this feature to the next update list. 

    .entry-meta a { font-size: 14px; }

    Thanks

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
TheBlogger WordPress Theme
Login and Registration Log in · Register