making the article posts wider.

  • Resolved Zim1

    (@zim1)


    11 years, 4 months ago

    Basically, i am trying to widen the post area.
    I found a way to make it work on PCs but this fails to work on mobile devices because of the negative value i have put in the code.

    This is the page, with the changes i did:
    http://www.francisconoa.com/326/

    This is the original code:

    .sticky {
}
.single .hentry,
.error404 .hentry,
.page .hentry,
.search-no-results .no-results {
	margin: 0 0px 1.5em;
	padding: 70px 50px;
	width: 700px;
	height: auto;
	z-index: 10;

    This is the changes i did:

    .sticky {
}
.single .hentry,
.error404 .hentry,
.page .hentry,
.search-no-results .no-results {
	margin: 0 -148px 1.5em;
	padding: 70px 50px;
	width: 1000px;
	height: auto;
	z-index: 10;

    Please let me know if it is possible to make these changes not take effect on a mobile device or if there is a better way to do this.

    Much appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Imran Ali

    (@imranaliweb)

    11 years, 4 months ago

    hi

    Not effect on your mobile device if use Media queries css

    Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.

    Thread Starter Zim1

    (@zim1)

    11 years, 4 months ago

    Thanks for the answer mate!
    Although, i think i will need you to give me an example.

    Are you referring to this:

    @media screen and ( max-width: 1200px ) {
	.site {
		width: 600px;
	}
	.single .content-area,
	.page .content-area,
	.search-no-results .content-area,
	.error404 .content-area {
		width: 100%;
	}

    Sorry for my noobness 😀 learning here!

    Imran Ali

    (@imranaliweb)

    11 years, 4 months ago

    hi

    Yes you are used this functionality for mobile and other devices responsive

    @media screen and ( max-width: 240px ) {
    your content like
    width:100%; ;
    }

    @media screen and ( max-width: 320px ) {
    your content ;
    }

    @media screen and ( max-width: 480px ) {
    your content ;
    }

    @media screen and ( max-width: 768px ) {
    your content ;
    }

    @media screen and ( max-width: 1024px ) {
    your content ;
    }

    Thanks

    Thread Starter Zim1

    (@zim1)

    11 years, 4 months ago

    Thanks for pointing me in the right direction!
    I’ll research about it and poke the code a little!

    Thanks man!

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

The topic ‘making the article posts wider.’ is closed to new replies.