Wordpress CSS & Media Query

I am using a Wordpress theme and facing some challenges while changing the @media query for tab/mobile view lower than 961px screen size. Following is the link:

http://www.logopexcil.com on a higher resolution the header background image starting from very top but lower than 961px resolution it starts after topbar & nav bar. I tried with the following CSS but seems I am doing something wrong:

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,.parallax-sec 

.page-title-x, .has-header-type11 .video-sec .page-title-x {

   top:0!important;  

  }

}

asked Nov 19 '18 at 22:26

Syed Muhammad Iftikhar

486

add a comment |

I am using a Wordpress theme and facing some challenges while changing the @media query for tab/mobile view lower than 961px screen size. Following is the link:

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,.parallax-sec 

.page-title-x, .has-header-type11 .video-sec .page-title-x {

   top:0!important;  

  }

}

asked Nov 19 '18 at 22:26

Syed Muhammad Iftikhar

486

add a comment |

I am using a Wordpress theme and facing some challenges while changing the @media query for tab/mobile view lower than 961px screen size. Following is the link:

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,.parallax-sec 

.page-title-x, .has-header-type11 .video-sec .page-title-x {

   top:0!important;  

  }

}

asked Nov 19 '18 at 22:26

Syed Muhammad Iftikhar

486

I am using a Wordpress theme and facing some challenges while changing the @media query for tab/mobile view lower than 961px screen size. Following is the link:

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,.parallax-sec 

.page-title-x, .has-header-type11 .video-sec .page-title-x {

   top:0!important;  

  }

}

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,.parallax-sec 

.page-title-x, .has-header-type11 .video-sec .page-title-x {

   top:0!important;  

  }

}

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,.parallax-sec 

.page-title-x, .has-header-type11 .video-sec .page-title-x {

   top:0!important;  

  }

}

html css media-queries

asked Nov 19 '18 at 22:26

Syed Muhammad Iftikhar

486

asked Nov 19 '18 at 22:26

Syed Muhammad Iftikhar

486

asked Nov 19 '18 at 22:26

Syed Muhammad Iftikhar

486

asked Nov 19 '18 at 22:26

Syed Muhammad Iftikhar

486

asked Nov 19 '18 at 22:26

Syed Muhammad Iftikhar

486

add a comment |

3 Answers
3

active

oldest

votes

From your description I'm understanding you need assistance with alignment. This CSS adjusts the container and header since they have to be reversed. Hope it helps.

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,

.parallax-sec 

.page-title-x, 

.has-header-type11 .video-sec .page-title-x {top:0!important;}





  .top-bar {display: none;} /* this was taking up space */

  .container {position:relative;top: 70px;} /* in the HTML this is above header, so bump it down */

  #header.w-header-type-11 {position: relative !important;top: -155px;}

  #main-content.container {padding:0;} /* remove unneeded padding */

}

answered Nov 19 '18 at 23:11

rawnewdlz

618718

add a comment |

Here's the problem: when the screen shrinks:

#header loses `position: absolute

the top bar becomes visible

answered Nov 19 '18 at 23:11

Chris Happy

4,58811033

add a comment |

The image is a background image, so

@media (max-width: 961px)

.has-header-type11 .blox.page-title-x, .parallax-sec .page-title-x, .has-header-type11         

.video-sec .page-title-x {

    background-position-y: top !important;

}

The .page-title-x div already has an inline style, so the !important is required.

answered Nov 19 '18 at 23:14

jeanpaulxiao

1635

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383548%2fwordpress-css-media-query%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

From your description I'm understanding you need assistance with alignment. This CSS adjusts the container and header since they have to be reversed. Hope it helps.

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,

.parallax-sec 

.page-title-x, 

.has-header-type11 .video-sec .page-title-x {top:0!important;}





  .top-bar {display: none;} /* this was taking up space */

  .container {position:relative;top: 70px;} /* in the HTML this is above header, so bump it down */

  #header.w-header-type-11 {position: relative !important;top: -155px;}

  #main-content.container {padding:0;} /* remove unneeded padding */

}

answered Nov 19 '18 at 23:11

rawnewdlz

618718

add a comment |

From your description I'm understanding you need assistance with alignment. This CSS adjusts the container and header since they have to be reversed. Hope it helps.

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,

.parallax-sec 

.page-title-x, 

.has-header-type11 .video-sec .page-title-x {top:0!important;}





  .top-bar {display: none;} /* this was taking up space */

  .container {position:relative;top: 70px;} /* in the HTML this is above header, so bump it down */

  #header.w-header-type-11 {position: relative !important;top: -155px;}

  #main-content.container {padding:0;} /* remove unneeded padding */

}

answered Nov 19 '18 at 23:11

rawnewdlz

618718

add a comment |

From your description I'm understanding you need assistance with alignment. This CSS adjusts the container and header since they have to be reversed. Hope it helps.

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,

.parallax-sec 

.page-title-x, 

.has-header-type11 .video-sec .page-title-x {top:0!important;}





  .top-bar {display: none;} /* this was taking up space */

  .container {position:relative;top: 70px;} /* in the HTML this is above header, so bump it down */

  #header.w-header-type-11 {position: relative !important;top: -155px;}

  #main-content.container {padding:0;} /* remove unneeded padding */

}

answered Nov 19 '18 at 23:11

rawnewdlz

618718

From your description I'm understanding you need assistance with alignment. This CSS adjusts the container and header since they have to be reversed. Hope it helps.

@media (max-width: 961px) {

.has-header-type11 .blox.page-title-x,

.parallax-sec 

.page-title-x, 

.has-header-type11 .video-sec .page-title-x {top:0!important;}





  .top-bar {display: none;} /* this was taking up space */

  .container {position:relative;top: 70px;} /* in the HTML this is above header, so bump it down */

  #header.w-header-type-11 {position: relative !important;top: -155px;}

  #main-content.container {padding:0;} /* remove unneeded padding */

}

answered Nov 19 '18 at 23:11

rawnewdlz

618718

answered Nov 19 '18 at 23:11

rawnewdlz

618718

answered Nov 19 '18 at 23:11

rawnewdlz

618718

answered Nov 19 '18 at 23:11

rawnewdlz

618718

add a comment |

Here's the problem: when the screen shrinks:

#header loses `position: absolute

the top bar becomes visible

answered Nov 19 '18 at 23:11

Chris Happy

4,58811033

add a comment |

Here's the problem: when the screen shrinks:

#header loses `position: absolute

the top bar becomes visible

answered Nov 19 '18 at 23:11

Chris Happy

4,58811033

add a comment |

Here's the problem: when the screen shrinks:

#header loses `position: absolute

the top bar becomes visible

answered Nov 19 '18 at 23:11

Chris Happy

4,58811033

Here's the problem: when the screen shrinks:

#header loses `position: absolute

the top bar becomes visible

answered Nov 19 '18 at 23:11

Chris Happy

4,58811033

answered Nov 19 '18 at 23:11

Chris Happy

4,58811033

answered Nov 19 '18 at 23:11

Chris Happy

4,58811033

answered Nov 19 '18 at 23:11

Chris Happy

4,58811033

add a comment |

The image is a background image, so

@media (max-width: 961px)

.has-header-type11 .blox.page-title-x, .parallax-sec .page-title-x, .has-header-type11         

.video-sec .page-title-x {

    background-position-y: top !important;

}

The .page-title-x div already has an inline style, so the !important is required.

answered Nov 19 '18 at 23:14

jeanpaulxiao

1635

add a comment |

The image is a background image, so

@media (max-width: 961px)

.has-header-type11 .blox.page-title-x, .parallax-sec .page-title-x, .has-header-type11         

.video-sec .page-title-x {

    background-position-y: top !important;

}

The .page-title-x div already has an inline style, so the !important is required.

answered Nov 19 '18 at 23:14

jeanpaulxiao

1635

add a comment |

The image is a background image, so

@media (max-width: 961px)

.has-header-type11 .blox.page-title-x, .parallax-sec .page-title-x, .has-header-type11         

.video-sec .page-title-x {

    background-position-y: top !important;

}

The .page-title-x div already has an inline style, so the !important is required.

answered Nov 19 '18 at 23:14

jeanpaulxiao

1635

The image is a background image, so

@media (max-width: 961px)

.has-header-type11 .blox.page-title-x, .parallax-sec .page-title-x, .has-header-type11         

.video-sec .page-title-x {

    background-position-y: top !important;

}

The .page-title-x div already has an inline style, so the !important is required.

answered Nov 19 '18 at 23:14

jeanpaulxiao

1635

answered Nov 19 '18 at 23:14

jeanpaulxiao

1635

answered Nov 19 '18 at 23:14

jeanpaulxiao

1635

answered Nov 19 '18 at 23:14

jeanpaulxiao

1635

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky