CSS Snippet to add to WP.com CSS Upgrade WordPress

• SOLVED

I need the CSS code for a blog on Wordpress.com my blog ledesmaphotography.com but its hosted by wordpress.com so its all CSS.

The problem I’m having is that I put this CSS code:

div.entry.basis-list { width: 68.89362%; }

which expands the content of my single post view just fine but that CSS is affecting the responsiveness on the iPhone and iPad view. I wrote a thread here to the theme template coders: [[LINK a]]http://premium-themes.forums.wordpress.com/topic/making-blog-entry-wider-with-the-custom-css-upgrade?replies=15[[/LINK]] and there you can see screen shots but no matter what I do I check do not include the custom css to the mobile its still carrying it through.

And the coders don’t support that and he said the following:

As Zack mentioned, you'll want to add your custom <strong>CSS within a media query</strong>. If you're unfamiliar with these, be sure to read through this guide about using media queries.

I hope this helps point you in the right direction.


My goal is for the CSS that is below to not affect the CSS that handles the iPhone and iPad view. If you can help. Let me know. If not no worries I’ll try posting it on forum later on tonight. Cheers.

So I don’t have access to PHP files, its just CSS this job.

Below is my custom CSS.


My current Custom CSS:

/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.

By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.

If you need any further help, ask in the CSS Customization forum.
*/
.basis-list ul {
list-style: circle;
}

.single .post-title {
font-size: 2.09rem;
}

.fine-print,,fine-print a {
font-size: .15rem;
color: #BBB;
}

.jp-carousel-image-meta {
display: none !important;
}

.jp-carousel-left-column-wrapper {
margin-left: auto;
margin-right: auto;
}

.jp-carousel-info {
display: none;
}

div.entry.basis-list {
width: 68.89362%;
}

Answers (2)

2014-09-05

timDesain Nanang answers:

css could detect the browser resolution.

try this code:

@media (min-width:1140px){
div.entry.basis-list {width: 68.89362%;}
}

---

Jorge Ledesma comments:

Thanks that worked. Can you explain what it did. Thanks so much.

---

timDesain Nanang comments:

[[LINK href="http://www.w3.org/TR/css3-mediaqueries/#width"]]http://www.w3.org/TR/css3-mediaqueries/#width[[/LINK]]

---

Jorge Ledesma comments:

thanks

2014-09-05

Remy answers:

Media queries allow to trigger styles at specific widths, heights and more. In this case, the styles enclosed in the media queries will only apply when the display width is at least 1140 pixels, thus excluding mobiles or tablets that have a narrower width.

---

Jorge Ledesma comments:

thx