Twenty Fourteen – Right content widget

  • Hi, I am trying to embed a 300 x 600px in the right content sidebar widget of the twenty fourteen theme, using a text widget. Looks fine on a desktop, but on an iPad two things happen.
    1. its as if the image is zoomed, the original height and width is scaled up
    2. when the theme responds to the iPad screen size, the right content bar is to thin and doesn’t show my picture fully. I think #1 makes this worse also.

    I installed the custom CSS plugin but I dont know how or what might need to be adjusted. Any help would be appreciated. Thanks!

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

  • OHAI, can I take a look at this website of yours? It would help solve the problem. ??

    Thread Starter ccarpinteri

    (@ccarpinteri)

    Hi @emilytk, if there is a chance I can contact you offline? I cant post the website here for another few days. If that is ok, let me know how I can contact you. I am at <username>@gmail.

    If you could do me a favour, and check the Twenty Fourteen style.css first. In line 4000-ish there should be a line saying

    @media screen and (min-width: 1040px){

    I’m almost certain your problem is caused by something that sits inside rules like those. They’re media queries, and they’re checking for how wide the browser window is. Normally, iPads don’t go further than 1024px, so you need to check for declarations that handle those kinds of widths.
    If you could inspect your text box inside dev tools, you might find that something inside them brackets is overriding your style. If that is so, you should try to disable it.

    Thread Starter ccarpinteri

    (@ccarpinteri)

    Hi @emilytk

    This is what’s in the CSS file:

    @media screen and (min-width: 1040px) {
	.site-content .has-post-thumbnail .entry-header {
		margin-top: -48px;
	}

	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,
	.page-content,
	.post-navigation,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		padding-right: 15px;
		padding-left: 15px;
	}

	.full-width .archive-header,
	.full-width .comments-area,
	.full-width .image-navigation,
	.full-width .page-header,
	.full-width .page-content,
	.full-width .post-navigation,
	.full-width .site-content .entry-header,
	.full-width .site-content .entry-content,
	.full-width .site-content .entry-summary,
	.full-width .site-content footer.entry-meta {
		padding-right: 30px;
		padding-left: 30px;
	}
}

    Twenty Fourteen’s CSS is the only part of this puzzle I can actually see, because it’s on the internet. ?? I was asking you to check it, though.

    The min-width: 1040px means that the following style declarations be applied to a site in a browser window that is at least 1040px wide. So basically, everything with a width higher than 1024px shouldn’t be a problem, because your issue occurs on the iPad, thus a browser width that is smaller than 1040px.

    I’m afraid I need at least three more informations:
    1. Is it possible for you to post your widget’s (and a bit of it’s context’s) HTML into this thread? And if you have already written some CSS, could you also provide me with that?

    2. What widget are you using?

    3. Could you provide me with a screen shot of the problem? (No need to use your iPad, just see if you can resize your browser window to a point where your widget breaks.)

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Twenty Fourteen – Right content widget’ is closed to new replies.