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;
}
}html css media-queries
asked Nov 19 '18 at 22:26
Syed Muhammad IftikharSyed 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:
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;
}
}html css media-queries
asked Nov 19 '18 at 22:26
Syed Muhammad IftikharSyed 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:
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;
}
}html css media-queries
asked Nov 19 '18 at 22:26
Syed Muhammad IftikharSyed 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:
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;
}
}@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
html css media-queries
asked Nov 19 '18 at 22:26
Syed Muhammad IftikharSyed Muhammad Iftikhar
486
asked Nov 19 '18 at 22:26
Syed Muhammad IftikharSyed Muhammad Iftikhar
486
asked Nov 19 '18 at 22:26
Syed Muhammad IftikharSyed Muhammad Iftikhar
486
asked Nov 19 '18 at 22:26
Syed Muhammad IftikharSyed Muhammad Iftikhar
486
asked Nov 19 '18 at 22:26
Syed Muhammad IftikharSyed Muhammad Iftikhar
486
486
add a comment |
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
rawnewdlzrawnewdlz
618718
add a comment |
Here's the problem: when the screen shrinks:
#headerloses `position: absolute- the top bar becomes visible
answered Nov 19 '18 at 23:11
Chris HappyChris 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
jeanpaulxiaojeanpaulxiao
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
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
rawnewdlzrawnewdlz
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
rawnewdlzrawnewdlz
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
rawnewdlzrawnewdlz
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
rawnewdlzrawnewdlz
618718
answered Nov 19 '18 at 23:11
rawnewdlzrawnewdlz
618718
answered Nov 19 '18 at 23:11
rawnewdlzrawnewdlz
618718
answered Nov 19 '18 at 23:11
rawnewdlzrawnewdlz
618718
618718
add a comment |
add a comment |
Here's the problem: when the screen shrinks:
#headerloses `position: absolute- the top bar becomes visible
answered Nov 19 '18 at 23:11
Chris HappyChris Happy
4,58811033
add a comment |
Here's the problem: when the screen shrinks:
#headerloses `position: absolute- the top bar becomes visible
answered Nov 19 '18 at 23:11
Chris HappyChris Happy
4,58811033
add a comment |
Here's the problem: when the screen shrinks:
#headerloses `position: absolute- the top bar becomes visible
answered Nov 19 '18 at 23:11
Chris HappyChris Happy
4,58811033
Here's the problem: when the screen shrinks:
#headerloses `position: absolute- the top bar becomes visible
answered Nov 19 '18 at 23:11
Chris HappyChris Happy
4,58811033
answered Nov 19 '18 at 23:11
Chris HappyChris Happy
4,58811033
answered Nov 19 '18 at 23:11
Chris HappyChris Happy
4,58811033
answered Nov 19 '18 at 23:11
Chris HappyChris Happy
4,58811033
4,58811033
add a comment |
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
jeanpaulxiaojeanpaulxiao
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
jeanpaulxiaojeanpaulxiao
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
jeanpaulxiaojeanpaulxiao
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
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 23:14
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 23:14
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 23:14
jeanpaulxiaojeanpaulxiao
1635
1635
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
