CSS 입력 필드에 붙여넣으니 바로 적용됐습니다!

KBoard 플러그인에서 게시글 목록 페이지의 코드를

본문 페이지로 적용했을 때 레이아웃이 깨지는 문제는

게시글 목록 페이지와 본문 페이지에 적용된 CSS 코드가 다르기 때문입니다.

만약, 게시글 목록 페이지에만 적용되는 CSS 코드를 다른 페이지에 적용할 경우

해당 페이지에서도 동일한 레이아웃으로 표시되게 CSS 코드를 적용해주셔야 합니다.

아래의 CSS 코드를 활용해서 해결이 가능한지 확인해보시겠어요?

#kboard-default-list .kboard-search input { margin-bottom: 0 !important; }
#kboard-document .kboard-search input { display: inline; margin: 0; margin-bottom: 0 !important; padding: 0 5px; width: 200px; min-width: 0; max-width: 200px; height: 26px; min-height: 0; font-size: 14px; color: #666666; border-radius: 0; border: 1px solid #f1f1f1; background: none; background-color: white; line-height: 26px; vertical-align: middle; box-shadow: none; box-sizing: content-box; padding: 0 5px; }

@media screen and (max-width: 600px) {
	#kboard-default-list .kboard-search input { width: 74%; max-width: 74%; }
	#kboard-default-list .kboard-search button { width: 25%; }
	#kboard-document .kboard-search input { float: left; margin-right: 1%; width: 74%; max-width: 74%; height: 28px; line-height: 28px; box-sizing: border-box; }
	#kboard-document .kboard-search button { width: 25%; box-sizing: border-box; }
}

위의 코드에서 width 또는 max-width 속성을 변경하시면 너비를 조절하실 수 있습니다.

CSS 코드는

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에 추가하실 수 있습니다.

고맙습니다.

1번같은 경우에는 모바일에서 검색바가 왼쪽으로 밀려있고 끝에서 끝까지 width를 차지하지않고있습니다

2) 게시글

2번의 경우는 검색바가 중앙에 위치해있으나 이 또한 width를 100%로 수정하는 방법을 모르겠습니다

제가 잘 설명을 못한것같아서 다시 말씀드리면

둘 다 모바일에서 width를 100%로 맞추고 싶은데 방법을 알려주시면 감사하겠습니다!

(검색폼 시작부터 끝까지 같은 코드를 1번과 2번에 삽입했는데도 디자인이 달라지는 이유가 궁금합니다. 가능하면 통일하고싶거든요)

감사합니다^^

비회원으로도 확인 가능한 페이지 주소 알려주시면

CSS 코드로 해결이 가능할지 살펴보겠습니다.

고맙습니다.

/var/www/html/wp-content/plugins/kboard/skin/쓰시는 스킨/list.php

<input type="text" name="keyword" value="<?php echo esc_attr(kboard_keyword())?>"

이걸 찾아서

<input type="text" name="keyword" value="<?php echo esc_attr(kboard_keyword())?>" placeholder="요기다가 쓰고싶은거 쓰기">

이렇게 바꾸면 성공!

조금씩 수정하다가 문제가 하나 생겼는데 방법이 궁금합니다

	<div class="kboard-search">
		<form id="kboard-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
			<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
				<select name="target">
					<option value=""><?php echo __('All', 'kboard')?></option>
					<option value="title"<?php if(kboard_target() == 'title'):?> selected<?php endif?>><?php echo __('Title', 'kboard')?></option>
					<option value="content"<?php if(kboard_target() == 'content'):?> selected<?php endif?>><?php echo __('Content', 'kboard')?></option>
					<option value="member_display"<?php if(kboard_target() == 'member_display'):?> selected<?php endif?>><?php echo __('Author', 'kboard')?></option>
				</select>
			<input type="text" name="keyword" value="<?php echo esc_attr(kboard_keyword())?>" placeholder="ha">
			<button type="submit" class="kboard-default-button-small"><?php echo __('Search', 'kboard')?></button>
		</form>
	</div>
	<!-- 검색폼 끝 -->

https://imgur.com/DOtkw5t

왼쪽에 'All'을 위 코드에서 <select>에서 </select>까지를 지워서 없앴는데

컴퓨터랑 핸드폰으로 볼때 검색창과 검색버튼이 왼쪽으로 치우쳐졌습니다

이걸 핸드폰에서는 화면 넓이를 꽉 채우고 (검색부분을 늘려서)

컴퓨터에서는 중앙으로 오게 하는 방법이 있나요?