[Anonymous]

Hi
How can I the set Full width in responsive view?

Thanks, Offir

[Sakin]

@offirkeren: Full width is also responsive in Catch Everest Theme. So, what is the issue? Let me know it and also send me your site URL.

[Anonymous]

Site: http://themobilecasino.co.uk/

Every first time I go to the site on a new mobile phone the width is about 80-90%. Meaning I see the dark background on the expense of the main content area.
If I zoom in (with my fingers) it will switch to 100% but this needs to be done on every phone that go to the site on its first time…

How can I the set Full width in Portrait responsive view?

[Sakin]

@offirkeren: Can you send me the screnshot explaining that. As when I check in your site from Mobile devices, we see then nice layout of the theme system.

[Anonymous]

Hi,
How can I upload an image?

Do you have an email address i can mail to?

Offir

[Sakin]

@offirkeren: You can just upload the screenshot in your site or any photo sharing site and send the link of that image.

[Anonymous]

Hi Sakin,

Nexus 4 example but it happens on every android and iPhone devices:
https://www.dropbox.com/s/ry5cyy7er2efcjv/Screenshot_2013-11-20-10-00-20.png

Offir

[Sakin]

@offirkeren: When I check in from iPhone only Landscape has background. So, if you want full width on those devices then first you need to find their screen resolution sizes.

Try adding in the following CSS in “Appearance => Theme Options => Custom CSS” box.

/* For Screen size below 768px */ 
@media screen and (max-width: 768px) {		
.site { width: 100%; }
}

[Anonymous]

Thanks.
Fixed.
Offir

[Dave.82]

Hello Sakin,

can you please have a look at http://schinderhannes-mtb.org with your mobile device?

Can I use a custom-css to disable
– Social-Links (Facebook, Flickr, RSS etc)
– the search-function
– an the right sidebar

with mobile-device below 768px?
Thank you!
Dave

[Sakin]

@Dave.82: Fist you need to remove your following css from “Custom CSS” box.

#secondary { float: right; padding-top: 20px; padding-bottom: 0px; padding-left: 10px; padding-right: 0px; text-align: left; width: 250px; font-family: Tahoma; font-size: 16px; Arial; line-height: 1.2; background-color: #fafafa; border-left: 1px solid #e6e6e6; }
/* =Sidebar verrücken
----------------------------------------------- */
#secondary{ margin-top: -50px; margin-right: -50px; }

The above custom css is conflicting with your responsive mobile design. So, if you want to add that you need to add that only for larger screen. Then the css will be as below:

@media screen and (min-width: 961px) {
#secondary { float: right; padding-top: 20px; padding-bottom: 0px; padding-left: 10px; padding-right: 0px; text-align: left; width: 250px; font-family: Tahoma; font-size: 16px; Arial; line-height: 1.2; background-color: #fafafa; border-left: 1px solid #e6e6e6; }

/* =Sidebar verrücken
----------------------------------------------- */
#secondary{ margin-top: -50px; margin-right: -50px; }
}

To Hide the Header Right Segment and the right sidebar in mobile devices below 768px you can add the following CSS in “Appearance => Theme Options => Custom CSS” box.

@media screen and (max-width: 767px) {
/* Hide Header Right Section */
#header-right { display: none; }
/* Hide Right Sidebar */
#secondary { display: none; }
}

[Dave.82]

Perfect! Thank you very much!!! 🙂
Fantastic support!

[Author]

Posts