what are you wanting to change?
Your site looks to be responsive.
Can you be more specific about the areas you want to change?
What type of device are you viewing your site on?
Different device have different screen sizes. Knowing the screen size will help us understand what you’re looking at.
The homepage. I want the page to be adaptive to any mobile devices. When I open using smartphone, it does not seems to be adaptive like others website. How to fix this? I want it to have the same view like what I see in desktop whenever I open it using mobile. Some of the graphics such as “APPROVED & ACCREDITED, AWARD” did not display well on mobile.
And how can I remove the Main Courses in the header?
in responsive design you target screen sizes and not devices. The screen size are defined using the @media tag example:
@media screen and (min-width:320px) and (max-width:500px){
css code goes here.
}
in the above example css code would run if the screen is greater than 320px and less then 500px. You can’t really say all devices. You have to target screen sizes. There isn’t any statements in css to target specific devices only specific screen sizes.
Your Theme is using a css library called bootstrap. I don’t use bootstrap so im not an expert on it.
it appears that bootstrap changes most of your layout elements around a width of 768px.
so if you wanted to make the “APPROVED& ACCREDITED” section smaller at this point rather then extend the width of the screen you could use the following code.
@media screen and (max-width:768px){
.vc_gitem-zone.vc_gitem-zone-a.vc-gitem-zone-height-mode-auto.vc-gitem- zone-height-mode-auto-1-1.vc_gitem-is-link {
width: 50%;
height: auto;
margin: 0 auto;
}
This would make your icon smaller and center them on the screen. I’m not really sure what you want done with this section.
When you say Main Courses are you referring to the section where it says school of business ,…
This appears to be a widget. If you want to get rid of it completely look under widget area in your control panel. If howerver, you want to hide it on mobile devices you can use the following code.
@media screen and (max-width:768px) {
div#nav_menu-9 {
display: none;
}
}
