Responsive text and borders

Support
#6

Hi,

You can try this code instead.

@media (max-width: 767px){
.x-main.full { 
   margin:200px 100px 100px; 
}
}

You may change 200px to adjust the top spacing.

Hope that helps.

#7

Brilliant, that worked! One last problem! Now on desktop the header doesn’t go across the length of the page - so on widescreen our logo is not top left - what have I done?

#8

Hi there,

Please try this code as well:

.x-navbar .x-navbar-inner .x-container.max {
    max-width: 100%;
    width: 98%;
}

Hope this helps.

#9

Perfect thanks so much

#10

Glad to know
Thanks!

#11

I have another question sorry - can I make the featured images smaller both on individual blog posts and on my news page that indexes them?

#12

Yeah sure, this for the individual blog posts.

.single-post .entry-featured {
	float: none;
	max-width: 500px;
	margin: 0 auto;
}

And this is for the index blog page

.blog .has-post-thumbnail .entry-featured {
	max-width: 500px;
	margin: 0 auto;
}

Add that to Theme Options > CSS, feel free to adjust the 500px value.

Cheers!

#13

Thanks - I tried that before but it just reduces the image width and the white container stays the same size underneath so it looks weird. I want to reduce the whole thing

#14

In that case, please add this CSS code instead.

.blog .x-container.max,
.single-post .x-container.max {
	max-width: 900px;
}

Cheers!

#15

That hasn’t made any difference - it’s still the same big size.

#16

Hi @bca,

We are working on this (http://axisstars.com/news/) site, right? I don’t see the given CSS code being added in there.

Please add the given CSS code to Theme Options > CSS

Clear your browser’s cache after adding the code, it should work I had tested it.

If not, please provide us login credentials in a Secure note so we can take a closer look.

Cheers!

#17

I added it but it made no difference so I removed it again. Have added it back but it doesn’t change anything. Also seem to have a huge black space at the top of each blog article…

Thanks for any help :slight_smile:

#18

Hello @bca,

Do you want something like this?

If that is the case, then you will have to use this code:

.single-post .entry-featured {
	float: none;
	max-width: 500px;
	margin: 0 auto;
}

.blog .has-post-thumbnail .entry-featured {
	max-width: 500px;
	margin: 0 auto;
}

If this not what you want, please send us a screenshot or mock layout of what you really wanted.

Thanks.

#19

No because then the photo doesn’t look like it’s part of the article - just randomly stuck on the top. Will have to stick with it being too big but can you tell me how to get rid of the big black space at the top of the articles?

#20

Hello @bca,

The big gap at the top is because of this custom css:

.x-main.full {
    margin: 100px;
}

Have it updated and use this instead:

.x-main.full {
    margin: 0 100px;
}

Hope this helps. Please let us know how it goes.

#21

Thanks - that works for the blog pages but means that the border on the photo on the homepage cuts off - I don’t usually have so many problems with x theme. Have bought it for about 5 other sites. Sorry :frowning:

#22

Hello @bca,

I am not sure we are on the same page. I have check your home page and I do not see any borders or image getting cut off.

Would you mind sending us a screenshot were we can see your issue clearly?

Thanks.

#23

axisstars.com is the homepage and the red border at the top of the photo is missing. Also the text on the contact us page is now outside the container

#24

Hi There,

Please find and remove this custom CSS:

.entry-content.content {
    margin-top: -50px;
}

There is a left & right margin on the content section because of this custom:

.x-main.full {margin: 0 100px;}

Please find and remove it as well.

Let us know how it goes!

#25

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.