Full width in responsive view

This topic has 11 replies, 3 voices, and was last updated 10 years, 11 months ago by Dave.82.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
September 13, 2013 at 11:26 pm #14517

Anonymous
Inactive

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

Thanks, Offir

September 14, 2013 at 12:45 am #14521

Sakin
Keymaster

@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.

September 16, 2013 at 8:02 pm #14607

Anonymous
Inactive

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?

September 17, 2013 at 2:22 am #14638

Sakin
Keymaster

@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.

October 28, 2013 at 12:39 pm #16460

Anonymous
Inactive

Hi,
How can I upload an image?

Do you have an email address i can mail to?

Offir

October 28, 2013 at 10:34 pm #16480

Sakin
Keymaster

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

November 20, 2013 at 2:35 pm #17412

Anonymous
Inactive

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

November 20, 2013 at 2:59 pm #17417
Sakin
Keymaster
@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%; }
}
```
November 20, 2013 at 3:39 pm #17420

Anonymous
Inactive

Thanks.
Fixed.
Offir

November 26, 2013 at 4:04 pm #17654

Dave.82
Participant

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

November 26, 2013 at 9:45 pm #17659
Sakin
Keymaster
@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; }
}
```
November 26, 2013 at 11:04 pm #17664

Dave.82
Participant

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

Posts