How change Slider only on desktop version?

  • Hello everybody!
    Alex thanks for greatfull theme.
    My question – how I can change CSS of slider only in desktop version?
    I made changes in style.css of child theme:

    .flexslider .slides img { width: 100%; height: auto; display:inline-block; ; margin-left: auto; margin-right: auto;}
.flexslider .slides > li { position: inherit; }
.featured .post-title { font-size: 34px; letter-spacing: -0.7px; line-height: 1.4em; }

.post-thumbnail { width: 100%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }
.post-thumbnail { float: left; position: relative; margin-bottom: 1em; }
.post-thumbnail img { display: block; width: 100%; height: auto; }

.featured .post-thumbnail { width: 50%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }
.featured .post-thumbnail { float: left; position: relative; margin-bottom: 1em; }
.featured .post-thumbnail img { display: block; width: 100%; height: auto; }

.post-datagroup { width: 50%; padding: 0 20px; box-sizing: border-box; -moz-box-sizing: border-box;}
.post-datagroup { float: right; position: relative; margin-bottom: 1em; }

    Its make slider more compact in desktop version. But in mobile this look ugly (
    How I can separate this?
    Thank you

Viewing 1 replies (of 1 total)

  • Just put all of that code in this media query inside your custom.css or inside the style.css of the Hueman Child theme:

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

}

    The final code should look like this:

    @media screen and (min-width: 1024px) {
	.flexslider .slides img { width: 100%; height: auto; display: inline-block; margin-left: auto; margin-right: auto; }
	.flexslider .slides > li { position: inherit; }
	.featured .post-title { font-size: 34px; letter-spacing: -0.7px; line-height: 1.4em; }

	.post-thumbnail { width: 100%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }
	.post-thumbnail { float: left; position: relative; margin-bottom: 1em; }
	.post-thumbnail img { display: block; width: 100%; height: auto; }

	.featured .post-thumbnail { width: 50%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }
	.featured .post-thumbnail { float: left; position: relative; margin-bottom: 1em; }
	.featured .post-thumbnail img { display: block; width: 100%; height: auto; }

	.post-datagroup { width: 50%; padding: 0 20px; box-sizing: border-box; -moz-box-sizing: border-box; }
	.post-datagroup { float: right; position: relative; margin-bottom: 1em; }
}

    You can change the min-width‘s pixel value to a lowest width number for a desktop monitor. I think that nobody uses monitors with a resolution lower than 1024×768 pixels nowdays, so I typed 1024px as a minimal pixel width value.

Viewing 1 replies (of 1 total)
  • The topic ‘How change Slider only on desktop version?’ is closed to new replies.