Docs

[Huseyin T]

Hi there,

I wonder if you could help me as i am stuck within the X theme and
cannot seem to move forward and desperately need your support…

I am using the renew stack at the moment and have come to a dead end
regarding two aspects. I have spent hours trying to figure this out myself
before coming to you for support.

First issue is that my header does not keep its original size when being
viewed on other devices and shrinks considerably.

Second issue is the page content is also scrambled when viewed on
smaller devises.

I have tried nearly all elements with the same effect in mind to see if i
could retain its proportions on smaller devices without no luck.

If you wish to take a look yourself please feel free with the link below.

http://s622430481.websitehome.co.uk/

My details are:

Mr Huseyin Turkay
Purchase code: 6703c574-eeaf-4718-be8e-9fa70ac563f2 – 6 May 2014

Any assistance would be very much appreciated.

Thank you so much for you time, take care.

Huseyin

P.S I was told to post this here from my information email from themeco, again thank you for any support you can offer me as this is preventing me moving forward.

[Rue Nel]

Hello There,

Thanks for writing in! I have checked that page and it seems that you have inserted a gap shortcodes within an element. I want you to edit your page and remove the gap shortcodes. You should be using the Gap element in Cornerstone instead. Having your gap shortcodes messed up your html structure and even the layout. This is why you should only be using the gap element and drag it as an element and not the shortcode.

Hope this make sense. Please let us know how it goes.

[Huseyin T]

Hi there,

Thanks for getting back to me, i really appreciate it.

I have tried this on the home page but the image drops down the page, how can i get the image to move to the top of the page on smaller devices?? as it looks very untidy somewhere random mid page..

Also, What about my header, as it shrinks on smaller devices? Unless there is another way of displaying my telephone number and logo? The top bar is too small as it needs to be as it appears, a good size.

Thanks Rue.

Huseyin

[Christopher]

Hi there,

#1 Columns stack on top of each other from left to right, if you want to change the order for smaller screen sizes, please use visibility option and display/hide specific section on specific screen size.

#2 Instead of including phone number to your logo, add phone number and icons in topbar. If you need to resize text in topbar, please let us know.

Hope it helps.

[Huseyin T]

Hello again,

With regards to hiding columns how do you do that as i know how to hide sections but i just want to hide the picture which i cannot seem to do, also if you look at my header which has telephone numbers and logo how do i achieve this without it shrinking on smaller devices?? I have looked at using top bar but i am limited unless i can upload an image to it and increase text size.

Simply put if you look at my desk top version i really want it to look as close as possible on all smaller devices.

http://s622430481.websitehome.co.uk/

Appreciate your time on this. I am sure with your knowledge of X this will be straight forward for you.

I eagerly await your response, i am so close now as i need this live asap!!

God bless

Huseyin

[Huseyin T]

Sorry,

Also regarding the gap shortcodes, i placed them there within the element as i needed to reduce the space as the gaps were too large between the text. Can this mess up my html as i was told it has.?
Using the gap element how do i use it to reduce gaps between text??

Thanks again !!!

Huseyin

[Joao]

Hi Huseyin,

1- How to hide an image.

you can add a class to your image inside cornerstone. On your Image a a class like my-image on the Class Box.

Please see image attached.

Than you can add the following code to your Appereance > Customizer > Custom > CSS

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

.x-img-rounded .my-image {
display: none;
}
}

2- You are using an image as your header information telephone skype etc. So it will resize to fit the mobile screen.

My suggestions would be that you use the logo Astara as a logo instead of this whole image as banner and we can help you to fit ll this information with text on the topbar, this way when it resizes it will look good, you also will be able to link the telephone number to telephone number and skype to skype.

I Don´t know what you mean by your gaps shortcode can mess with your HTML. I used often the Gap Element in Cornerstone to bring balance on the way my websites look, I usually use % instead of px to define the size since I find it responds better in responsive devices.

You can setup your topbar content accessing your Appereance > Customizer > Header and scroll down to turn on the topbar content. write your telephones there and reach us for any necessary help regarding the formatting of your website.

You can also provide us your Wp-Admin Credentials in a private reply and this will speed the process.

Hope that helps,

Joao

[Huseyin T]

Hi there,

How do i rotate the image in the right column of a section to rotate left when on smaller devices instead of rotating right ?
So the image then sits on top of the text instead of under it??

Also, really frustrated with the header section as mentioned as it shrinks and cannot see logo or tel numbers on smaller devices? You mentioned using top bar but i need it to look as it does on desk-top version. Maybe when on smaller devices the tel numbers on right can move closer towards the logo on left at least keeping its proportions. I know you guys can support me with this, i really appreciate your time but if you are struggling with my requests of support i understand and i will have to pay for a developer to help me, which i do not really want to do.

Now if i could maybe keep the appearance of header as it is on desktop and then maybe have it different on smaller devices maybe we could look at that instead of changing desktop. Maybe to have top bar on on smaller devices only !!

I am open to suggestions.

I know you guys are in great demand and i appreciate your time, i really do.

Take care

Huseyin

My site: http://s622430481.websitehome.co.uk/

[Rue Nel]

Hello Huseyin,

I have checked your site and as @Joao suggested, it would be a good idea to separate your logo and the phone numbers in separate image. Once you have your logo as a separate image, you can use the solution in this thread (https://community.theme.co/forums/topic/add-text-phone-number-into-header/#post-347431) to add a phone number right after the logo. It would be easier to align it in smaller screens if you have this way.

And secondly, I am assuming that you want something like this:

You can check out how I manage to achieve that by checking out this topic: https://community.theme.co/forums/topic/mobile-screen-size-layout/#post-826285

Hope this helps.

[Huseyin T]

Hell again,

I have uploaded logo as mentioned now trying to incorporate info into php hile but i cannot get access to it as i am with 1&1 and it is managed by them!!The logo looks much better now, just need inline telephone numbers.
Is there another way, maybe css??? instead of going to (functions) php file.

Thanks buddy
Huseyin

[Rad]

Hi there,

Looks like already added on top bar, if not, would you like moving it along with logo position?

Thanks!

[Huseyin T]

Hi,

Yes, i was experimenting with top bar bit for my telephone numbers, it is just not the same. So i really need it running inline with logo in the header, as mentioned before i was given details to do this but i cannot get access to php file??

One more thing… very important, is there any code i can use to make columns rotate information to the left instead of rotating to the right?? Because as you will see from the reply above i could do with the photo rotating left to sit on top of text not under text on smaller devices.

God bless you for all of you guys help and support.

Huseyin

[Jade]

Hi Huseyin,

To add a phone number in line with the logo, please add this CSS:

.x-brand {
    width: 100%;
}

.x-brand:after {
    content: "PHONE NUMBER HERE";
    letter-spacing: 0;
    color: #fff;
    float: right;
    margin-top: 40px;
}

Would you mind clarifying on your query about rotating columns as I am not that certain what you are trying to mean. Thank you.

[Huseyin T]

Hi Jade,

Fantastic you got my number in header… well done, thankyou !
So nearly there, you are a god send.
What about me getting another number in the header, but underneath the one i have just put in, what css code would i need for that ?

Like this:

0121 426 3734
07811 511 681

That would be amazing, if you could give me the code for that one too!!

Also, regarding the columns they rotate information to the right dont they on smaller devices?
I have had to duplicate the sections but other way round and hiding them on certain devices so the image ends up on top instead of underneath. See image shot above from one of your colleagues.

Once i have this done, i promise i will leave you guys alone !!

Thanks again so much you have been great !!

Huseyin

[Jade]

Hi Huseyin,

To make the phone numbers appear in two lines, we could update the code we have provided to:

.x-brand:after {
    content: " t: 0121 426 3734 - 07811 511 681";
    letter-spacing: 0;
    color: #fff;
    float: right;
    margin-top: 40px;
    max-width: 130px;
    text-align: right;
    line-height: 1.2em;
}

Kindly adjust the max-width value if necessary.

I am still confuse about the image rotation that you are describing. Currently, when I view the site on a smaller device, the image that sits on the right of the content when you view it on a desktop now appears at the top of the texts. See screenshot below. Is this what you are trying to achieve? It would be helpful if you can provide us with some screenshots of what you are trying to make the page display like in mobile. Thank you.

[Author]

Posts