Reduce the size of all elements on the website in Semantic UI

Question

Reduce the size of all elements on the website in Semantic UI

I am facing an issue with my semantic UI website where everything appears too zoomed in and I would like to scale it down proportionally, from fonts to containers and segments.

Attempting to solve this problem, I have tried using CSS properties like zoom: 80%;, which worked well in Google Chrome but not in Firefox.

Then, I experimented with using transform scale:

html {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8); 
    transform: scale(0.8);
}

However, a drawback of this method is that the header and footer lost their intended 100% width.

Is there a specific way in Semantic UI to achieve this scaling effect? I have used site.variables to modify color variables but I am unsure if I can adjust default sizes for elements uniformly by reducing px or em size across the board.

Do you know of any CSS or Semantic UI technique to accomplish this task?

UPDATE:
For instance, on my site, when viewed at certain resolutions, segments are set to a width of 1135px. I would prefer these widths to only apply at resolutions above 1300 or 1400px, or alternatively have segment widths at 1000px for 1200px resolution. Ideally, I would like to standardize this behavior for all components rather than having to write custom CSS for each element to override default settings.

This is the current styling applied to each container:

@media only screen and (min-width: 1200px)
.ui.container {
    width: 1135px;
    margin-left: auto !important;
    margin-right: auto !important;
}

Is there a more efficient approach to handle this situation without needing to individually adjust width specifications for every element? When viewing the site on screens slightly larger than 1200px, I find the overall size to be excessive.

html css semantic-ui

Answer 1

Answer №1

In order to customize the appearance of your components in Semantic UI, Gulp is used to compile the CSS and Javascript for your project. It's essential to adjust the base font-size to make components smaller, but it must be done before compilation takes place. Changing this value after the fact may lead to unexpected outcomes, as the sizes for various components have already been calculated.

To modify the base size, navigate to {theme}/globals/site.variables:

/*-------------------
      Base Sizes
--------------------*/

/* Control all sizes with this single variable */
@emSize   : 14px;

/* Adjust page text size */
@fontSize : 14px;

After making these changes, run gulp build to compile everything. If you prefer not to use the default build tools provided by Semantic UI, you can create your own custom gulp functions. Additional information on theming can be found here.

It's important to avoid scaling the entire document up or down, as this is not considered a best practice. Some browsers do not support the transform property, which could result in text and borders appearing blurry.

Answer 2

In order to customize the appearance of your components in Semantic UI, Gulp is used to compile the CSS and Javascript for your project. It's essential to adjust the base font-size to make components smaller, but it must be done before compilation takes place. Changing this value after the fact may lead to unexpected outcomes, as the sizes for various components have already been calculated.

To modify the base size, navigate to {theme}/globals/site.variables:

/*-------------------
      Base Sizes
--------------------*/

/* Control all sizes with this single variable */
@emSize   : 14px;

/* Adjust page text size */
@fontSize : 14px;

After making these changes, run gulp build to compile everything. If you prefer not to use the default build tools provided by Semantic UI, you can create your own custom gulp functions. Additional information on theming can be found here.

It's important to avoid scaling the entire document up or down, as this is not considered a best practice. Some browsers do not support the transform property, which could result in text and borders appearing blurry.

Answer 3

Answer №2

From what I understand, Semantic UI opts for relative sizes when it comes to styling elements. To adjust the font-size accordingly, you can try this simple solution:

html, body {
    font-size: 14px;
}

Typically, the default size hovers around 16px.

Answer 4

From what I understand, Semantic UI opts for relative sizes when it comes to styling elements. To adjust the font-size accordingly, you can try this simple solution:

html, body {
    font-size: 14px;
}

Typically, the default size hovers around 16px.

Answer 5

Answer №3

After much exploration, I have discovered a solution to this problem and feel compelled to share it with the community in case others encounter the same issue.

Instead of simply overriding CSS rules, which can be difficult to maintain, I opted for a more standardized approach using Semantic UI.

My resolution involved modifying

src/site/elements/container.variables

to adjust the default width for large monitors from 1200px to 1000px:

@largeMonitorBreakpoint:1000px;

By making this alteration, I ensured that the breakpoint for large monitors is now set at 1000px, influencing the container widths accordingly so that each container will now occupy up to 935px.

Answer 6

After much exploration, I have discovered a solution to this problem and feel compelled to share it with the community in case others encounter the same issue.

Instead of simply overriding CSS rules, which can be difficult to maintain, I opted for a more standardized approach using Semantic UI.

My resolution involved modifying

src/site/elements/container.variables

to adjust the default width for large monitors from 1200px to 1000px:

@largeMonitorBreakpoint:1000px;

By making this alteration, I ensured that the breakpoint for large monitors is now set at 1000px, influencing the container widths accordingly so that each container will now occupy up to 935px.

Reduce the size of all elements on the website in Semantic UI

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to design an HTML table that collapses all the columns in the header while showing the columns in the body?

Trouble Encountered with AngularJS ng-bind-html and Text not Wr

Display of menu content may be unavailable at certain screen resolutions

Ways to prevent decreasing the value below zero in ReactJS?

Successfully executing complex designs using CSS grid or flexbox

"Customize your search experience with a bootstrap search bar featuring multiple input fields

What is the best way to set a minimum width for websites with relative (%) widths that are compatible with IE6 and above?

Issues with HTML Email display

Missing ghost image appears when you drag and drop the file

Comparing the use of jQuery's data() method versus directly accessing attributes with native JavaScript using get

Problems with Wordpress AJAX search functionality

Creating a bespoke Bootstrap 4 Modal experience without the backdrop

Finding elements using XPath in Selenium

Center the div vertically

Developing a robust system for managing classnames

Creating a custom form validation within a modal window featuring tab navigation, all styled with the latest Bootstrap

Automatically populating grids with Php

How jQuery stops the submission of a form

Clicking on a select box causes the scrollbar area to vanish, shifting all the page content to the right

Creating a CSS layout where a square remains confined within another square even as the screen size changes can be achieved by implementing specific styling techniques and