Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Change Responsive Widths - Corporex Template

Featured Lock Resolved Task
Hi there,

I am creating a new site with the Corporex template and would like to modify the responsive resolutions of the template.

I would like my site to only be two standard wdiths - one for desktop at 100% and the second for all devices displaying at a resolution under 1199px.
So that would mean the my site would display as normal up until the screen size was 1200px and then it would display the mobile version of the template.

I have attempted to modify the @media code in the .../shaper_corporex/css/template.css file, but as I do not full understand what I am doing I can't get it to work correctly.

Can someone please help me as soon as possible!
Any help provided would be very much appreciated!

Thanks in advance,
Sarah

9 Answers

Sarah Morris

More than a month ago #Permalink
Closing this ticket as the only resolution was to completely redesign my site with mobile view as the most important.
Thanks for your help!
Sarah

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your query. Please follow below instruction.

corporex\templates\shaper_corporex\less\theme.less

.body-innerwrapper{
overflow-x:hidden;
background: #fff;
max-width: 1270px;
margin: 50px auto;
}


or

corporex\templates\shaper_corporex\css\template.css

.body-innerwrapper {
overflow-x: hidden;
background: #fff;
max-width: 1270px;
margin: 50px auto;
}


If you need more help, please let us know. Thanks

Sarah Morris

More than a month ago #Permalink
Hi Toufiq,
I'm sorry, but I'm not sure what to do here.

Firstly, I am unsure as to how this will fix my problem and secondly, I already have this exact code in my template.css file - am I supposed to remove it?
If so, this did nothing to my site.

Please see the attached screenshots as a visual explanation of what I would like to achieve.

Attachments (5)

  • Resolution100%to1200px-.jpg
    Resolution100%to1200px-.jpg 680.8 KB
  • Resolution1199pxto980px.jpg
    Resolution1199pxto980px.jpg 543.4 KB
  • Resolution979pxto780px.jpg
    Resolution979pxto780px.jpg 436.5 KB
  • Resolution767pxto481px.jpg
    Resolution767pxto481px.jpg 328.1 KB
  • Resolution480pxtoMinimum.jpg
    Resolution480pxtoMinimum.jpg 232.1 KB

Sarah Morris

More than a month ago #Permalink
Please note that as I would like to have the site display at only 2 resolutions, I would like the responsive adjustment to be made as the site site becomes 1200px.

This means that if the site is larger than 1200px it would display as normal (see screenshot 1) and if it is smaller than 1200px is would display the mobile site (see screenshot 5). Screenshots are attached to my previous post.

If the site was displaying at 1199px, then I would like it to look like the attached screenshot...

Attachments (1)

  • PreferredResolutionSetup.jpg
    PreferredResolutionSetup.jpg 130 KB

Toufiq - Staff

More than a month ago #Permalink
Sarah Allen wrote:

Please note that as I would like to have the site display at only 2 resolutions, I would like the responsive adjustment to be made as the site site becomes 1200px.

This means that if the site is larger than 1200px it would display as normal (see screenshot 1) and if it is smaller than 1200px is would display the mobile site (see screenshot 5). Screenshots are attached to my previous post.

If the site was displaying at 1199px, then I would like it to look like the attached screenshot...


Hi, use this code into your template.css or theme.less file. If your less compile enabled then please change theme.less file. If your less compile disable, then you can change template.css file .


.body-innerwrapper {
background: #fff none repeat scroll 0 0;
margin: 0 auto;
max-width: 1170px;
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
}


-Thanks

Sarah Morris

More than a month ago #Permalink
Toufiq wrote:

Hi, use this code into your template.css or theme.less file. If your less compile enabled then please change theme.less file. If your less compile disable, then you can change template.css file .


.body-innerwrapper {
background: #fff none repeat scroll 0 0;
margin: 0 auto;
max-width: 1170px;
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
}


-Thanks


Hi Toufiq,
This is not working - it is not doing anything to my site whatsoever except adding a 15px margin either side of the page.
I am also not sure how it is meant to solve the issue I posted with.

Please thoroughly read my requests again and pay particular attention to my screenshots - these show exactly how I would like my site to display.
The screenshots that show "REMOVE" on them are to demonstrate that I want the site to skip these resolutions completely and only utilise the ones I have marked "KEEP".

I appreciate you help very much, but I just don't see how that code is going to make the changes I need made to my site.
Please let me know if the information I have provided is enough?
If you are unable to help me, would it be possible to put me in contact with someone who can?

Thanks very much,
Sarah

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your reply. Please check below url for responsive issues.

http://getbootstrap.com/css/#responsive-utilities

-Thanks

Sarah Morris

More than a month ago #Permalink
Toufiq wrote:

Hi,

Thanks for your reply. Please check below url for responsive issues.

http://getbootstrap.com/css/#responsive-utilities

-Thanks


Hi Toufiq,
Thankyou for getting back to me and thanks for the information you attached.

As I already know what responsive widths my site needs to be, I just need to know how to implement these sizings into the existing template.
I am really finding it difficult to figure out these media sizings and understand how they work - I'm beginning to get extremely stressed and I just want to get this over and done with! :(

Is it possible to modify the template.css and bootstrap files so that the site only has 3 widths. One for Desktop, one for Tablet and one for Mobile.

I would really appreciate some serious in depth help here as I am out of my depth and do not understand what changes I need to make.
All I know is that my site does not display correctly at certain responsive widths and I can't understand why! :(

I don't really know what the best solution is, so that is why I came here to the forums for some help!
If there are changes I can make to ensure my site displays correctly at all widths (like the Corporex Demo), please by all means instruct me on how to do this as I am desperate!

Please help!
Thanks in advance,
Sarah


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Sifat

Sifat

Total Accepted Answers: 61
Toufiq

Toufiq

Total Accepted Answers: 47
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 14
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 12

118

Templates

303072

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us