Docs

[ldollard]

IS there a way to use a different home page for mobile/ipad devices?

and/or

How do i specify in the css to only apply to different screen sizes.

I’d like options for both if you could.

Thanks

[Prasant Rai]

Hello There,

Thanks for writing in!

1) You have the option to display separate home page if user is coming from a mobile device, however it would require some customization, please take a look at this:

http://stackoverflow.com/questions/16165211/how-to-set-a-different-static-homepage-for-mobile-version-wordpress

Please note that we can’t provide support for custom development work.

2) You can use CSS media queries. Please walk-through following tutorial:

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

[ldollard]

Thanks for your response Prasant.

So to be clear if I use CSS on certain classes and ID’s within.

@media only screen and (max-width: 500px) {}

it’ll only use that CSS if the screen size is smaller than 500px?

Thanks

[Joao]

Hi There,

You are correct.

Let us know if you need help with anything else.

Joao

[ldollard]

great thanks

[Friech]

Should you require any further assistance with X|THEME and Cornerstone, please feel free to get in touch with us.

Cheers!

[ldollard]

Hi Guys,

url: http://dev4.novelcreativeagency.com/

So i created this CSS

@media (max-width: 900px) {
#x-content-band-3.x-content-band.vc {
padding-top: 50px;
margin-top: 50px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}}
}

to change the layout for the content band “INFORMATION ON OUR PRODUCTS”

The padding doesn’t lessen and it just looks like crap, if you could let me know what i’m missing on this one i can figure out the rest.

What am i missing here.

I tried it on an LG G3 and an Iphone 6 Plus. I made it 900px so anything smaller than that will have the design to full width.

[Rue Nel]

Hello There,

Thanks for the update! I would recommend that you remove your code for the moment. Please keep in mind that it is a good practice to place the @media css block at the bottom of all your other custom css to prevent it from being overridden with other css.

have the code updated and use this instead:

@media (max-width: 979px) {
    .page-id-75 #x-content-band-3.x-content-band.vc {
    padding-top: 50px;
    margin-top: 50px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
  }
}

Please let us know how it goes.

[ldollard]

i removed all css and only used yours and it doesn’t affect anything, sorry.

[ldollard]

i had css in visual composer i removed it all and now only this css is in the customiser:

@media (max-width: 2000px) {
.page-id-75 #x-content-band-3.x-content-band.vc {
padding-top: 50px;
margin-top: 50px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
}

.page-id-75 #x-content-band-3.x-content-band.vc {
margin-top: 50px; padding-right: 200px; padding-bottom: 20px; padding-left: 200px;
}

It now looks fine in the live preview in themeco customiser and looks fine on the live site via chrome if i resize the tab, but looks like crap still on my phone.

[ldollard]

take me out back and shoot me, i had @media on top.. duh me….

Only question i have left is

When i try the same on the content band below it messes all the mobile css up, like so:

@media (max-width: 979px) {
.page-id-75 #x-content-band-3.x-content-band.vc {

padding-top: 50px;
margin-top: 50px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
text-align:center;
}
.page-id-75 #x-content-band-4.x-content-band.vc {

padding-top: 50px;
margin-top: 50px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
text-align:center;
}
}

What am i doing wrong there.

thanks so much for your help.

[Rue Nel]

Hello There,

Since you have added the inline css to your content band, you have to add !important in your @media css block. Please update the code and use this:

@media (max-width: 979px) {
 .page-id-75 #x-content-band-3.x-content-band.vc {
   padding-top: 50px !important;
   margin-top: 50px !important;
   padding-right: 5px !important;
   padding-bottom: 20px !important;
   padding-left: 5px !important;
   text-align:center !important;
 }

 .page-id-75 #x-content-band-3.x-content-band.vc .x-column *{
   text-align:center !important;
 }

 .page-id-75 #x-content-band-4.x-content-band.vc {
   padding-top: 50px !important;
   margin-top: 50px !important;
   padding-right: 5px !important;
   padding-bottom: 20px !important;
   padding-left: 5px !important;
   text-align:center !important;
 }

 .page-id-75 #x-content-band-4.x-content-band.vc *{
   text-align:center !important;
 }
}

You might need to add more padding to the left and right if it is needed.

[ldollard]

Hi Rue,

Thanks so much, i even took the inline css out on the above content band, just didn’t think about it.

So instead i just removed all inline css throughout the entire homepage and redid it all in the themeco style sheet so its all in one place.

One more question

.page-id-75 #x-content-band-3.x-content-band.vc {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 300px;
padding-left: 300px;
}

.page-id-75 #x-content-band-4.x-content-band.vc {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 300px;
padding-left: 300px;
}

.page-id-75 #x-content-band-5.x-content-band.vc {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 300px;
padding-left: 300px;
}

.page-id-75 #x-content-band-7.x-content-band.vc {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 300px;
padding-left: 300px;
text-align: center;
}

.page-id-75 #x-content-band-9.x-content-band.vc {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 300px;
padding-left: 300px;
text-align: center;
}

.page-id-75 #x-content-band-10.x-content-band.vc {
margin-top: 50px;
padding-left: 300px;
padding-right: 300px;
margin-bottom: 50px;
text-align: center;
}

.page-id-75 #x-content-band-11.x-content-band.vc {
margin-top: 50px;
padding-left: 300px;
padding-right: 300px;
margin-bottom: 50px;
text-align: center;
}

.page-id-75 #x-content-band-12.x-content-band.vc {
margin-top: 50px;
padding-left: 300px;
padding-right: 300px;
margin-bottom: 50px;
text-align: center;
}

As you can see i’ve created CSS for each content band separately, is there a way if all the parameters are the same for each content band to simply do it once instead of creating so many copies of the same css but for different content bands.

meaning something like:

.page-id-75 #x-content-band-3#x-content-band-4#x-content-band-5.x-content-band.vc {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 300px;
padding-left: 300px;
}

i doubt thats the right CSS but hopefully you’ll know what i mean.

thanks so much

[Joao]

Hi There,

You can do like this:

.page-id-75 #x-content-band-3.x-content-band.vc , .page-id-75 #x-content-band-4.x-content-band.vc , .page-id-75 #x-content-band-5.x-content-band.vc , .page-id-75 #x-content-band-7.x-content-band.vc , .page-id-75 #x-content-band-9.x-content-band.vc ,  .page-id-75 #x-content-band-10.x-content-band.vc , .page-id-75 #x-content-band-11.x-content-band.vc , .page-id-75 #x-content-band-12.x-content-band.vc {
padding-top: 50px;
padding-bottom: 50px;
padding-right: 300px;
padding-left: 300px;
}

Hope that helps,

Joao

[ldollard]

Thats great thanks.

[Author]

Posts