Docs

[Aaron]

Hi,

I have created many pages which have easily become responsive by using the correct elements etc in the cornerstone of X Theme.

However this page is becoming harder to do so, if you scroll to down to see each section of features.. scaling this down breaks the page a bit and the styling – what is the best and most approachable way to make this responsive like the other pages, I have started using media queries but would like further advice.

Many thanks!

[Aaron]

This reply has been marked as private.

[Christopher]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Aaron]

This reply has been marked as private.

[Christopher]

Hi there,

Your custom CSS is causing this issue.

Find this CSS :

.commtext {
    width: 530px;
}
.clearcommsimg {
    margin-left: 80px;
    position: relative;
    bottom: 20px;
}

And update it to :

@media (min-width:979px){
.commtext {
    width: 530px;
}
.clearcommsimg {
    margin-left: 80px;
    position: relative;
    bottom: 20px;
}
}

Also remove inline CSS code that limits element’s width. See the attachment.

Hope it helps

[Aaron]

This reply has been marked as private.

[Joao]

Hi There,

That should happen naturally with X.

You might have some CSS that is forcing that not to happen.

Please provide your admin credentials so we can take a closer look.

Thanks

Joao

[Aaron]

This reply has been marked as private.

[Friech]

Hi There,

It appears that you have a custom menu. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[Aaron]

This reply has been marked as private.

[Rupok]

Hi there,

There is no standard screen size between 800px to 1000px. So you can ignore this or play with the CSS yourself. Media query would be like :

@media only screen and (min-width: 800px) and (max-width: 1000px) {
  // your CSS here
}

Cheers!

[Aaron]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (min-width:979px){
header.masthead.masthead-inline {
    height: 0;
}
.x-navbar {
    background-color: transparent;
border:none;
box-shadow:none;
}
}

Hope that helps.

[Aaron]

how do i target the button to change its color of the button?

I would like it to have outline of blue border, and when hovered go blue. Like shown in screenshot, thanks!

[Christopher]

Hi there,

Please find this code :

.demo-btn a {
    Color: white!important;
    background-color: #33c3ff!important;
    padding: 11px 11px 11px 11px!important;
    height: 35px!important;
    margin-top: 24px;
    border-radius: 3px;
}
.demo-btn a span:hover {
    background-color: #2bb1e8!important;
    border-color: #2bb1e8!important;
}

And update it to :

.demo-btn a {
    Color: #33c3ff;
    background-color: transparent;
    padding: 11px 11px 11px 11px!important;
    height: 35px!important;
    margin-top: 24px;
    border-radius: 3px;
    border: 1px solid #33c3ff;
}
.demo-btn a span{
 Color: #33c3ff;
}
.x-navbar .desktop .x-nav>li>a>span {
    border-radius: 0;
}
.demo-btn a:hover {
    Color: white!important;
    background-color: #33c3ff!important;
}

Hope it helps.

[Author]

Posts