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;
}
}
