Other CSS files contain similar styles. It all depends on the theme you're using.

FreshRSS/p/themes/base-theme/template.css

Lines 1242 to 1358 in c700fd3

    
           /*=== MOBILE */ 
        
           /*===========*/ 
        
           @media (max-width: 840px) { 
        
           	.header, 
        
           	.flux_header .item.website span, 
        
           	.item.date, .day .date, 
        
           	.dropdown-menu > .no-mobile, 
        
           	.no-mobile { 
        
           		display: none; 
        
           	} 
        
           	.form-group { 
        
           		margin-bottom: 10px; 
        
           	} 
        
           	.form-group .group-name { 
        
           		float: none; 
        
           	} 
        
           	.form-group .group-controls { 
        
           		margin-left: 0; 
        
           	} 
        
           	.dropdown .dropdown-menu { 
        
           		width: 100%; 
        
           		border-radius: 0; 
        
           		bottom: 0; 
        
           		position: fixed; 
        
           	} 
        
           	.dropdown-menu::after { 
        
           		display: none; 
        
           	} 
        
           	.aside .toggle_aside, 
        
           	.nav-login { 
        
           		display: block; 
        
           	} 
        
           	.nav_menu .toggle_aside, 
        
           	.nav_menu .search, 
        
           	#panel .close img { 
        
           		display: inline-block; 
        
           	} 
        
           	.aside { 
        
           		position: fixed; 
        
           		top: 0; bottom: 0; 
        
           		left: 0; 
        
           		width: 0; 
        
           		overflow: hidden; 
        
           		z-index: 100; 
        
           	} 
        
           	.aside:target { 
        
           		width: 90%; 
        
           		height: 100vh; 
        
           	} 
        
           	.aside_feed .configure-feeds { 
        
           		margin-top: 10px; 
        
           	} 
        
           	.flux_header .item.website { 
        
           		width: 40px; 
        
           	} 
        
           	.flux:not(.current):hover .item.title { 
        
           		position: relative; 
        
           		width: auto; 
        
           		white-space: nowrap; 
        
           	} 
        
           	.notification { 
        
           		top: 0; 
        
           		left: 0; 
        
           		right: 0; 
        
           	} 
        
           	#nav_entries { 
        
           		width: 100%; 
        
           	} 
        
           	#panel { 
        
           		top: 25px; bottom: 30px; 
        
           		left: 0; right: 0; 
        
           	} 
        
           	#panel .close { 
        
           		top: 0; right: 0; 
        
           		left: auto; bottom: auto; 
        
           		display: inline-block; 
        
           		width: 30px; 
        
           		height: 30px; 
        
           	} 
        
           	#slider.active { 
        
           		left: 0; 
        
           		top: 50px; 
        
           	} 
        
           	#close-slider img { 
        
           		display: initial; 
        
           	} 
        
           	#close-slider.active { 
        
           		background: #f6f6f6; 
        
           		display: block; 
        
           		width: 100%; 
        
           		height: 50px; 
        
           		z-index: 10; 
        
           		text-align: center; 
        
           		line-height: 50px; 
        
           		border-bottom: 1px solid #ddd; 
        
           	} 
        
           }

FreshRSS/p/themes/Origine/origine.css

Lines 1126 to 1217 in c700fd3

    
           /*=== MOBILE */ 
        
           /*===========*/ 
        
           @media (max-width: 840px) { 
        
           	.form-group .group-name { 
        
           		padding-bottom: 0; 
        
           		text-align: left; 
        
           	} 
        
           	.box .box-title .configure, 
        
           	.box .box-content .item .configure { 
        
           		visibility: visible; 
        
           	} 
        
           	.aside { 
        
           		transition: width 200ms linear; 
        
           	} 
        
           	.aside:target { 
        
           		box-shadow: 3px 0 3px #aaa; 
        
           	} 
        
           	.aside .toggle_aside, 
        
           	#panel .close { 
        
           		background: #f6f6f6; 
        
           		display: block; 
        
           		width: 100%; 
        
           		height: 50px; 
        
           		border-bottom: 1px solid #ddd; 
        
           		line-height: 50px; 
        
           		text-align: center; 
        
           	} 
        
           	.aside.aside_feed { 
        
           		padding: 0; 
        
           	} 
        
           	.post { 
        
           		padding-left: 15px; 
        
           		padding-right: 15px; 
        
           	} 
        
           	.nav_menu .btn { 
        
           		margin: 5px 10px; 
        
           	} 
        
           	.nav_menu .stick { 
        
           		margin: 0 10px; 
        
           	} 
        
           	.nav_menu .stick .btn { 
        
           		margin: 5px 0; 
        
           	} 
        
           	.nav_menu .search { 
        
           		display: inline-block; 
        
           		max-width: 97%; 
        
           	} 
        
           	.nav_menu .search input { 
        
           		max-width: 97%; 
        
           		width: 90px; 
        
           	} 
        
           	.nav_menu .search input:focus { 
        
           		width: 400px; 
        
           	} 
        
           	.day .name { 
        
           		font-size: 1.1rem; 
        
           		text-shadow: none; 
        
           	} 
        
           	.pagination { 
        
           		margin: 0 0 3.5em; 
        
           	} 
        
           	.notification a.close { 
        
           		background: transparent; 
        
           		display: block; 
        
           		left: 0; 
        
           	} 
        
           	.notification a.close:hover { 
        
           		opacity: 0.5; 
        
           	} 
        
           	.notification a.close .icon { 
        
           		display: none; 
        
           	} 
        
           }

	/=== MOBILE /
	/===========/

	@media (max-width: 840px) {
	.header,
	.flux_header .item.website span,
	.item.date, .day .date,
	.dropdown-menu > .no-mobile,
	.no-mobile {
	display: none;
	}

	.form-group {
	margin-bottom: 10px;
	}

	.form-group .group-name {
	float: none;
	}

	.form-group .group-controls {
	margin-left: 0;
	}

	.dropdown .dropdown-menu {
	width: 100%;
	border-radius: 0;
	bottom: 0;
	position: fixed;
	}

	.dropdown-menu::after {
	display: none;
	}

	.aside .toggle_aside,
	.nav-login {
	display: block;
	}

	.nav_menu .toggle_aside,
	.nav_menu .search,
	#panel .close img {
	display: inline-block;
	}

	.aside {
	position: fixed;
	top: 0; bottom: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	z-index: 100;
	}

	.aside:target {
	width: 90%;
	height: 100vh;
	}

	.aside_feed .configure-feeds {
	margin-top: 10px;
	}

	.flux_header .item.website {
	width: 40px;
	}

	.flux:not(.current):hover .item.title {
	position: relative;
	width: auto;
	white-space: nowrap;
	}

	.notification {
	top: 0;
	left: 0;
	right: 0;
	}

	#nav_entries {
	width: 100%;
	}

	#panel {
	top: 25px; bottom: 30px;
	left: 0; right: 0;
	}

	#panel .close {
	top: 0; right: 0;
	left: auto; bottom: auto;
	display: inline-block;
	width: 30px;
	height: 30px;
	}

	#slider.active {
	left: 0;
	top: 50px;
	}

	#close-slider img {
	display: initial;
	}

	#close-slider.active {
	background: #f6f6f6;
	display: block;
	width: 100%;
	height: 50px;
	z-index: 10;
	text-align: center;
	line-height: 50px;
	border-bottom: 1px solid #ddd;
	}
	}

Uh oh!

mobile UI in desktop? #2792

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions