How To Increase Width Of Texts Below Media Contents In Posts

  • My texts remain narrower than the media contents [audio, video, image etc] above them in my posts…
    The current limit for text-width usually and naturally obligates an unnecessary line-break even for the last single word[s] although there is more space available in compared to width of the media as visual…
    And I also consider that the text-width is based on default content-width [currently 1024px] of my theme and has a relativity with the other contents as they are mutual elements of the same post…
    How can I increase only text-width as much as I need?

    The blog I need help with is: (visible only to logged in users)

  • Based on your theme’s existing CSS here is how to expand the narrower content sections to be as wide as your videos (I haven’t tested how this works on smartphones/tablets):

    .page-content,
    .entry-content,
    .entry-summary,
    .entry-title,
    .entry-footer,
    .comments-area,
    .site-info,
    .entry-author,
    .entry-meta,
    .page-title,
    .taxonomy-description {
      width:1000px;
    }
    
    .entry-content .jetpack-video-wrapper,
    .entry-content .gallery,
    .entry-content .tiled-gallery-wrapper {
      margin-left:0;
    }

    One other thing to point out – I’m not sure how you’ve achieved it but you seem to have music auto-playing as soon as I visit your site which is an absolute pain when I’m listening to music through my laptop speakers already. I’d love to know how you achieved it as I wasn’t aware it was possible on WordPress.com but I’d also recommend disabling it as you’re likely to drive more visitors away from your site (closing the tab rather than searching for the mute button in whatever bit of your page is playing the audio) than you will attract!

  • When I directly add it on my CSS rules, it blocks the flexibility of theme…
    And I adjusted it in different values to find the flexible one…
    Recently, I’ve reduced only px value to 720 which is enough for my texts and looks fine in default [100%] zoom mode of my browsers [Chrome and FireFox on Windows] but whenever I check them in 90% and lower zoom, disorder repeats again…
    I mean, each element of contents gets position in different sides; aligns right or left; even expands page with a horizontal scroll-bar appears at the bottom of browsers…
    And I always customise my theme according to 90% and lower because my only device is a weak notebook with a mini screen [resolution 1024×600] so I usually have difficulty in browsing web properly…
    Unfortunately, 100% zoom only shows me the original pixels; not the actual design/position of elements and they move to their right places only when I reduce zoom to 90% and lower…
    In conclusion, I am not sure whether this latest revision for my theme is stable or not…

    And about the auto-playing music on my website:
    I’ve embedded my SoundCloud playlist on my sidebar with a text widget as HTML codes; including my custom parameters for auto-playing…
    Well, I gave priority to the first tracks specially as they also have easy/soft intro at beginning lasts about 45 seconds…
    It musn’t be a shock for any visitors as they already have enough time to click menu toggle and press the pause button there in a few seconds…
    Actually nobody cares my website and the things in it…
    My close friends & I are almost the only visitors…
    Well, I am already used to this…
    Sorry for the inconvenience…
    Thanks for your patience…

  • Change the first rule that @hallluke gave above to this and see what you think.

    .page-content, .entry-content, .entry-summary, .entry-title, .entry-footer, .comments-area, .site-info, .entry-author, .entry-meta, .page-title, .taxonomy-description {
        width: 100%;
        max-width: 1000px;
    }
  • P.S. I was looking at this post when I developed the above solution: http://aegaeusmann.me/2014/10/31/aegaeus-mann-intro-2014/ .

  • When I replace it with yours, all of media contents [except videos] align left; including the quote texts…
    This one looks working well only for videos and on Chrome…
    But on FireFox, it forces a refresh on the page even for videos to fit them in various zoom levels…

    First of all, there is a media-width box on CSS interface and we also add custom CSS rules…
    Do those two have any different effects on each other?
    I mean, should I keep both in the same value [currently both are 1000px] while adjusting my theme?
    For your information, I always insert my each content as align-center manually; except the quote texts…

    If you advise me to quit this specific revision and use the default ones to keep the flexibility of theme as a stable way, I’ll quit…
    What’s your idea, sir?

    PS: Thank you very much for your visits/views…
    And I am so glad to see you are interested in my updates…
    I just think about the possibility that hallluke is luckier than me about that auto-playing music because there are many DNS manipulations in Turkey by the government via The Presidency Of Telecommunication [TİB] even against SoundCloud here…
    Even I, the administrator/developer, am not allowed to hear my SoundFX when I launch my own website because of the HTTPS error reported as “Connection Was Reset” [tested in different locations] in Turkey…
    So I always have to preview/check my website out by the help of proxy websites as a logged-out user…
    And I’ve been failing in my attempts to edit my playlist or account even password on SoundCloud for months here and more…
    Well, this is a long story, sir…
    A very long story…

  • Sorry, this seemed to have gotten lost. I’m seeing everything centered on your site right now with the videos at 1000px in width, when I have my browser window wider than 1000px.

  • A few days ago I added the recent rules you suggested above…
    And I kept them for your review in case a new/subsequent reply from you…
    But after a few days, yesterday; I couldn’t resist to reverse them to the defaults temporarily as I wasn’t able to keep my patience enough to see my theme untidy here…
    I can add them again immediately if you’d like to review/develop it again, sir…
    Otherwise, I’ll be trying the new rules you’ve just given me for the main column width in our previous thread…
    As you wish, sir!

  • Let’s try the main column width change first and then we will work on the other items.

  • I’ve added & saved the following ones for your review:

    .page-content, .entry-content, .entry-summary, .entry-title, .entry-footer, .comments-area, .site-info, .entry-author, .entry-meta, .page-title, .taxonomy-description {
    width: 720px;
    }

    And my default media-width is 1280px…
    Currently, I see the same problems on my mini-notebook screen unless I stay with default [100%] zoom here…
    As soon as I go lower than 100%, they repeat…

    By the way, my point/focus is the proportionality between the contents & the texts…
    It looks not cool when the content is wide open [1000px] but the text still remains narrow [660px] for me…
    So I can even consider to decrease my default media width from 1280px to 720px to keep the proportional ratio with the texts [660px] as visual if you recommend…

  • Can you point me to a page or post where this repeating is happening? In most posts I’ve looked at on your site, there is little to no text, just the videos.

  • Sorry for my unspecific & confusing desciptions again, sir…
    Since I’ve applied most recent rule above, texts’ve already got well enough for me with 720px as I expect…
    For now, I’m just using my tweet-texts which are 140 characters and lower in my posts until I add my detailed paragraph-texts to them later…
    And with my word “repeating”, I meant “the problems” such as alignments of videos and images attached below for your review:

    https://aegaeusmann.files.wordpress.com/2014/12/video-main.png
    https://aegaeusmann.files.wordpress.com/2014/12/video-single.png
    https://aegaeusmann.files.wordpress.com/2014/12/image-main.png
    https://aegaeusmann.files.wordpress.com/2014/12/image-single.png

    PS: Yesterday, before adding & saving the rules, I just experimented and previewed more previous rules you suggested above before; in various combinations interchanging between them to make it easier & faster for you…
    And unfortunately, I previewed the same results with them…
    So I just saved the most recent one for main column width and exited…
    And as I mentioned before, it seems clear/OK in default [100%] zoom with no problem here…
    But whenever I browse it in 90% zoom and lower; contents get untidy as you can see in my screenshots above…
    Thank you very much for your patience bearing with me…
    And sorry for my exhausting issues making you busier there, sir…

  • With the videos being 1000px wide, and the content area being 720px wide, the videos can’t center align in the content div. Change the width in the following, in your custom CSS, to 1000px

    .page-content, .entry-content, .entry-summary, .entry-title, .entry-footer, .comments-area, .site-info, .entry-author, .entry-meta, .page-title, .taxonomy-description {
        width: 1000px;
    }

    and then add this

    .jetpack-video-wrapper {
        margin-left: auto !important;
        margin-right: auto;
    }
  • And this time, videos are OK but unfortunately the rest ones such as images and quote-texts have just aligned left, sir…

  • Probably, all those trials above from the top have already worked on standard screens with the resolutions higher than 1024×768 anywhere successfully…
    I guess, they are just not responding on my mini-screen [1024×600] here individually…
    And I assume, this topic has already been resolved…
    Well, do you mind if I quit this revision and reverse to the defaults in order to keep the stable responsiveness/flexibility of theme and not to waste your time & energy any more with those my obsessive requests here, sir?

  • The topic ‘How To Increase Width Of Texts Below Media Contents In Posts’ is closed to new replies.